ZooMove jQuery-plugin for å zoome bilder på Hover

Hvis du noen gang har lest et e-handelsnettsted, har du sannsynligvis sett det bildezoom effekt. Du svever et produktbilde og den delen av bildet forstørres for en klarere visning.

De ZooMove plugin er en fin måte å gjenta denne effekten på nettstedet ditt. Det er drevet av jQuery, slik at du kan få dette opp og kjører raskt uten mye kode.

ZooMove er helt gratis og åpen kildekode, tilgjengelig på GitHub for noen nysgjerrige utviklere. Det kan installeres gjennom NPM, Bower, garn, eller lastet ned direkte fra CDNJS.

For å sette opp et ZooMove-bilde trenger du tre spesifikke filer i sidens overskrift:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Begge ZooMove-filene kan minifiseres hvis du vil ha raskere sidelaster. Du kan også kombinere CSS-filen til ditt hovedformatark hvis det er lettere.

All den virkelige magien skjer i HTML der du kan sett HTML5 data- * attributter for de forskjellige effektene.

Dette lar deg lage din egen tilpasset zooming effekt basert på fire forskjellige parametere:

1. data-zoo-skala - definerer total zoomstørrelse når du svinger (for eksempel 2,0 for 200%)
2. data-zoo-move - definerer om bildet beveger seg sammen med markøren
3. data-zoo-spissen - definerer zoomet bilde vises over originalen
4. data-zoo-markør - definerer markørpunkt

En siste femte parameter lar deg definere hva Ny bilde URL bør være (hvis nødvendig).

Du kan bruke ZooMove i alle de store nettleserne, inkludert IE9 +. Denne plugin er mye støttet og det gir en helhet av en brukeropplevelse.

Hvis du leter etter en enkelt svever-til-zoom-bibliotek ZooMove er et utmerket valg. Det er lett nok å kjøre på et hvilket som helst nettsted og det er drevet av jQuery, så du trenger ikke å skrive så mye kode for å få det til å fungere.

Gå til hovedsiden for å se den i aksjon og sjekk ut dokumentasjonen på GitHub for å lære mer.