ZooMove jQuery-plugin om afbeeldingen op zweven te zoomen

Als u ooit een e-commercesite heeft bezocht, heeft u waarschijnlijk de beeldzoomeffect. Je zweeft een productfoto en dat deel van de afbeelding wordt vergroot voor een duidelijker zicht.

De ZooMove-plug-in is een geweldige manier om repliceer dit effect op uw site. Haar mogelijk gemaakt door jQuery, zodat u dit snel en zonder veel code kunt instellen.

ZooMove is volledig gratis en open source beschikbaar op GitHub voor nieuwsgierige ontwikkelaars. Het kan worden geïnstalleerd via NPM, Prieel, Garen, of direct gedownload van CDNJS.

Om een ​​ZooMove-afbeelding in te stellen, hebt u dit nodig drie specifieke bestanden in uw paginakop:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Beide ZooMove-bestanden kan worden verkleind als u sneller pagina's wilt laden. U kunt het CSS-bestand ook combineren in uw hoofdstijlblad als dat eenvoudiger is.

Alle echte magie gebeurt in de HTML waar je kunt stel HTML5 in data- * attributen voor de verschillende effecten.

Hiermee kunt u uw eigen aangepast zoomeffect gebaseerd op vier verschillende parameters:

1. data-zoo-schaal - definieert de totale zoomgrootte bij zweven (bijvoorbeeld 2,0 voor 200%)
2. data-zoo-move - bepaalt of de afbeelding beweegt mee met de cursor
3. data-zoo-over - definieert de ingezoomde afbeelding verschijnen over het origineel
4. data-zoo-cursor - definieert de cursor punt

Een laatste vijfde parameter laat je definiëren wat de nieuwe afbeeldings-URL zou moeten zijn (indien nodig).

U kunt ZooMove gebruiken in alle belangrijke browsers, inclusief IE9 +. Deze plugin is breed gedragen en het biedt een echte gebruikerservaring.

Als u op zoek bent naar een eenvoudige hover-to-zoom bibliotheek ZooMove is een uitstekende keuze. Haar licht genoeg om op elke website te draaien en dat is het ook mogelijk gemaakt door jQuery, dus je hoeft niet zoveel code te schrijven om het werkend te krijgen.

Ga naar de hoofdpagina om deze in actie te zien en bekijk de documentatie op GitHub voor meer informatie.