ZooMove jQuery-plugin til at zoome billeder på Hover

Hvis du nogensinde har kigget på et e-handelswebsted, har du sandsynligvis set det billedzoom effekt. Du svæver et produktbillede, og den del af billedet forstørres for en klarere visning.

Det ZooMove plugin er en god måde at replikere denne effekt på dit websted. Det er drevet af jQuery, så du kan få dette op og køre hurtigt uden meget kode.

ZooMove er helt gratis og open source, tilgængelig på GitHub for eventuelle nysgerrige udviklere. Det kan installeres igennem NPM, Bower, Garn, eller hentet direkte fra CDNJS.

For at oprette et ZooMove-billede skal du bruge tre specifikke filer i din sideoverskrift:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Begge ZooMove-filer kan reduceres hvis du vil have hurtigere sidebelastninger. Du kan også kombinere CSS-filen til dit hovedformatark, hvis det er lettere.

Al den virkelige magi sker i HTML'en, hvor du kan indstil HTML5 data- * attributter for de forskellige effekter.

Dette lader dig håndtere din egen brugerdefineret zooming effekt baseret på fire forskellige parametre:

1. data-zoo-skala - definerer total zoomstørrelse, når du svinger (fx 2,0 for 200%)
2. data-zoo-move - definerer om billedet flytter sammen med markøren
3. data-zoo-over - definerer det zoomede billede vises over originalen
4. data-zoo-markøren - definerer markør punkt

En sidste femte parameter lader dig definere hvad Ny billedwebadresse bør være (hvis nødvendigt).

Du kan bruge ZooMove i alle større browsere, herunder IE9 +. Dette plugin er bredt understøttet og det giver en hel del af en brugeroplevelse.

Hvis du leder efter en simpelt hover-to-zoom bibliotek ZooMove er et glimrende valg. Det er let nok at køre på enhver hjemmeside og det er drevet af jQuery, så du behøver ikke at skrive så meget kode for at få det til at fungere.

Besøg hovedsiden for at se den i aktion, og læs dokumentationen på GitHub for at få flere oplysninger.