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:

        

          
          

		  
10 Cool Gboard Features und wie man sie benutzt
            
Gboard, Google Keyboard mit neuem Namen und interessanten Features, hat gerade erst seinen Weg nach Andriod gefunden. Ihr Android-Telefon wurde bereits mit dieser neuen Standardtastatur aktualisiert. Wenn Sie aufgrund der eingeschränkten Funktionen des alten Google Keyboard gezwungen sind, zu einer Android-Tastatur eines Drittanbieters zu wechseln, könnte Gboard Ihre Meinung ändern .Gb
			
(Tech- und Design-Tipps)
          
        
      

        

          
          

		  
Personalisieren Sie Ihre Google Mail-Benutzeroberfläche mit Gmelius
            
Wenn Sie viel Zeit in Google Mail verbringen, E-Mails verfassen und beantworten, haben Sie sich wahrscheinlich gewünscht, dass bestimmte Dinge geändert werden könnten, um Ihre Google Mail-Erfahrung zu verbessern . Vielleicht vermissen Sie das alte Fenster zum Verfassen, oder vielleicht möchten Sie, dass Sie nicht alle diese Anzeigen sehen müssen, oder vielleicht möchten Sie die Schnittstelle hier und da optimieren, um Ihren Bedürfnissen und Ihrem Geschmack zu entsprechen. Nun, 
			
(Tech- und Design-Tipps)
          
        
      

  
  
  



Interessante Artikel






			
	
				

					Alles, was Sie wissen müssen, um Ihr langsames WLAN zu reparieren
					

			
	
				

					Instagram warnt dich, wenn jemand Screenshots eines in Instagram Direct ausgetauschten Austauschs macht
					
						







			
	
				

					Wesentliche E-Commerce-Tools, um Ihre Benutzer besser zu verstehen
					

			
	
				

					So aktualisieren Sie die Android-Sicherheitseinstellungen per Sprachbefehl