Glad zoomeffect toepassen op afbeeldingen met Zoomer

Er is een citaat dat zegt: "een foto zegt meer dan duizend woorden." In webdesign wordt het nog relevanter. Vooral als het gaat om het presenteren van producten, bijvoorbeeld op een e-commercesite. Mensen moeten een goed begrip krijgen en op een visuele manier naar het product kunnen kijken voordat ze toch een aankoop doen.

De afbeelding zo groot mogelijk maken, kan dit probleem niet oplossen, omdat er ook veel ruimte beschikbaar is. Daarom is de beste keuze om de afbeelding zoombaar te maken. Met Zoomer kunt u dat gemakkelijk laten gebeuren.

Zoomer is een gratis javascript-bibliotheek waarmee u uw afbeelding kunt zoomen . Wanneer deze is ingeschakeld, voegt deze een eigen stijl toe en een knop om in en uit te zoomen. Het ondersteunt ook meerdere afbeeldingen, die automatisch worden omgezet in een afbeeldingengalerij.

initialisatie

Voordat u het initialiseert, moet u eerst het Zoomer-script (dat u van de GitHub-pagina kunt krijgen) als volgt in uw project opnemen:

Zoomer zal de afbeelding omringen met zijn stijl en een zoom in en uit knop toevoegen. U moet ook het Zoomer-stylesheet opnemen voor de afsluitende tag van het head .

 ..  .. 

In- en uitzoomen

Om een ​​nieuwe Zoomer te maken, voeg je eenvoudig een afbeelding in een wrapper toe. Vergeet niet om de wikkel vaste hoogte en breedte te geven, omdat alle beschikbare ruimte door de nieuwe opmaak wordt gevuld. Ik maak bijvoorbeeld een omslag met de naam .zoomable en definieer de hoogte tot 500px en de breedte tot 100% als volgt:

 .zoomable {hoogte: 500px; breedte: 100%; } 

Vervolgens wikkel ik de afbeelding die ik wil vergroten, zoals hieronder:

        

          
          

		  
Oefen programmeren met Repl.it - ​​Een op browser gebaseerde IDE en compiler
            
Het instellen van de lokale runtime-omgeving kan echter een echte pijn voor beginners zijn. Dit vereist vaak de commandoregel die geweldig is om te leren terwijl je gaat, maar die in eerste instantie aanvoelt als een wegversperring.Met Repl.it kunt u oefenen met het coderen van elke gecompileerde taal in uw browser, van Python tot C ++ of zelfs van Swift voor iOS-apps
			
(Technische en ontwerptips)
          
        
      

        

          
          

		  
Krijg al uw sociale netwerkfeeds op één plek met feed
            
Sociale media zijn ongetwijfeld een integraal onderdeel van ons leven geworden. Elke dag loggen we in op onze Facebook-, Twitter- en Instagram-accounts en controleren we wat er in de wereld en onder onze vriendenkring gebeurt.Met zoveel sociale netwerken die er zijn, en zoveel informatie wordt gepost en geüpload naar deze netwerken, kan het soms een enorm gedoe zijn om op de hoogte te blijven van wat er gebeurt op uw favoriete netwerken .
			
(Technische en ontwerptips)
          
        
      

  
  
  



Interessante Artikelen






			
	
				

					9 Hulpmiddelen om uw nieuwsbrief te testen en er een voorbeeld van te geven
					

			
	
				

					Met dit hoesje kunt u uw iPhone altijd en overal opladen
					
						







			
	
				

					6 manieren waarop internet onze geest langzaam verandert
					

			
	
				

					De echte betekenis achter deze 25 slim ontworpen logo's