ZooMove jQuery Plugin för att zooma bilder på Hover

Om du någonsin har blivit en e-handelswebbplats så har du troligen sett den bildzoomseffekt. Du sveper ett produktfoto och den delen av bilden förstorar för en tydligare vy.

De ZooMove plugin är ett bra sätt att replikera denna effekt på din webbplats. Dess drivs av jQuery, så du kan få det här upp och springa snabbt utan mycket kod.

ZooMove är helt gratis och öppen källkod, tillgänglig på GitHub för några nyfikna utvecklare. Det kan installeras genom npm, Lövsal, Garn, eller laddas ner direkt från CDNJS.

För att skapa en ZooMove-bild behöver du tre specifika filer i din sidhuvud:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Båda ZooMove-filerna kan minimeras om du vill ha snabbare sidladdningar. Du kan också kombinera CSS-filen till ditt huvudformat om det är lättare.

Den verkliga magiken händer i HTML där du kan Ange HTML5 data- * attribut för de olika effekterna.

Detta gör att du kan skapa din egen anpassad zoomningseffekt baserad på fyra olika parametrar:

1. data zoo-skala - definierar total zoomstorlek vid svängning (t ex 2,0 för 200%)
2. data zoo-move - definierar om bilden rör sig tillsammans med markören
3. data zoo-over - definierar den zoomade bilden visas över originalet
4. data zoo-markören - definierar markörpunkt

En sista femte parametern låter dig definiera vad ny bildadress bör vara (om det behövs).

Du kan använda ZooMove i alla större webbläsare, inklusive IE9 +. Denna plugin är allmänt stöd och det erbjuder en hel del av en användarupplevelse.

Om du letar efter en enkelt svever-till-zoom-bibliotek ZooMove är ett utmärkt val. Dess lätt nog att springa på vilken webbplats som helst och det är drivs av jQuery, så du behöver inte skriva så mycket kod för att få det att fungera.

Besök huvudsidan för att se den i åtgärd och kolla dokumentationen på GitHub för att lära dig mer.