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:

        

          
          

		  
8 Dinge, die du über Android M wissen solltest
            
Android M, die nächste Generation von Android wurde angekündigt (wenn auch kein Wort darüber, was M wird noch sein). Google hat kürzlich die Entwicklervorschau der neuesten Version seines fortschrittlichen mobilen Betriebssystems in Google I / O 2015 vorgestellt. Diese neue Version von Android versucht, die Grundlagen mit großen Änderungen und vielen Bugfixes zu verbessern .Nach 
			
(Tech- und Design-Tipps)
          
        
      

        

          
          

		  
Was ist neu in Android O in Kürze
            
Android O, Googles nächste Version des Android-Betriebssystems, ist endlich in der Developer Preview-Form verfügbar. Wie bei allen neuen Android-Versionen wird Android O eine ganze Reihe neuer Funktionen für das Betriebssystem mit sich bringen.Für diejenigen von Ihnen, die das Android O nicht oder nur schwer auf Ihrem Gerät installieren können, finden Sie hier eine Zusammenfassung einiger der wichtigsten Funktionen, die derzeit auf dem Betriebssystem verfügbar sind. Ein n
			
(Tech- und Design-Tipps)
          
        
      

  
  
  



Interessante Artikel






			
	
				

					CSS3-Animation - Erstellen eines Fan-Out mit Bounce-Effekt mit Bezier-Kurve
					

			
	
				

					30 Webdesign-Portfolios, die Kunden beeindrucken
					
						







			
	
				

					5 praktische Android Apps, um Ihr WeChat zu überladen
					

			
	
				

					Der Lieferwagen von UPS kann eine Drohne einsetzen und es ist irgendwie cool