Wenden Sie den Zoom-Effekt auf Bilder mit Zoomer an

Es gibt ein Zitat, das besagt: "Ein Bild sagt mehr als tausend Worte." Im Webdesign wird es noch relevanter. Vor allem, wenn es darum geht, Produkte zu präsentieren, zum Beispiel auf einer E-Commerce-Website. Die Leute müssen einen klaren Griff bekommen und in der Lage sein, das Produkt visuell zu betrachten, bevor sie einen Kauf tätigen.

Das Bild so groß wie möglich zu machen, kann dieses Problem nicht lösen, da es auch viel Platz benötigt. Daher ist es am besten, das Bild zoombar zu machen. Mit Zoomer können Sie das ganz einfach machen.

Zoomer ist eine kostenlose Javascript-Bibliothek, mit der Sie Ihr Bild zoomen können . Wenn es aktiviert ist, fügt es einen eigenen Stil und eine Schaltfläche zum Vergrößern und Verkleinern hinzu. Es unterstützt auch mehrere Bilder, die automatisch in eine Bildergalerie umgewandelt werden.

Initialisierung

Bevor Sie es initialisieren, fügen Sie zunächst das Zoomer-Skript (das Sie von der GitHub-Seite erhalten) in Ihr Projekt ein:

Zoomer umgibt das Bild mit seinem Stil und fügt einen Zoom-In und Zoom-Button hinzu. Sie sollten das Zoomer-Stylesheet vor dem schließenden Tag von head einfügen.

 ..  .. 

Ein- und Auszoomen

Um einen neuen Zoomer zu erstellen, fügen Sie einfach ein Bild in einen Wrapper ein. Vergessen Sie nicht, dem Wrapper eine feste Höhe und Breite zu geben, da der gesamte verfügbare Platz durch das neue Markup ausgefüllt wird. Ich erstelle zum Beispiel einen Wrapper mit dem Namen .zoomable und definiere die Höhe auf 500px und die Breite auf 100% wie .zoomable :

 .zoomable {Höhe: 500px; Breite: 100%; } 

Dann wickle ich das Bild, das ich zoomen möchte, wie folgt um:

        

          
          

		  
30 Coole Straßenkunst
            
Die Kunst hat ihre Anziehungskraft auf den Mann auf der Straße verändert. Sie müssen nicht mehr Museen und Kunstgalerien besuchen, um einen Eindruck von zeitgenössischer Kunst zu bekommen. Sie können leicht Wandgemälde, Graffiti und Wandmalereien finden, die mit Ihren Gefühlen, Kulturen, Überzeugungen sowie mit den sich ändernden Zeiten mitschwingen.Sie trag
			
(Tech- und Design-Tipps)
          
        
      

        

          
          

		  
Windows 10 Creators Update - Was ist neu?
            
Microsofts nächstes großes und lang ersehntes Update für Windows 10, das Creators Update, ist jetzt für den manuellen Download für alle verfügbar, die daran interessiert sind, das Update frühzeitig zu erhalten. Alternativ wird das Update ab dem 11. April als automatischer Download zur Verfügung gestellt.Ähnlich
			
(Tech- und Design-Tipps)
          
        
      

  
  
  



Interessante Artikel






			
	
				

					Fünf analoge To-Do-List-Systeme für bessere Produktivität
					

			
	
				

					Wie man den CSS3-Mischmodus verwendet [CSS3-Tipps]
					
						







			
	
				

					20 Fotos, die dich wieder verlieben werden
					

			
	
				

					22 beste Webinar-Tools zum Hosten von Online-Meetings