ZooMove jQuery Plugin za povečavo slik na Hover

Če ste že kdaj brskali po spletnem mestu za e-trgovino, ki ste ga verjetno videli učinek povečave slike. Premaknete fotografijo izdelka in del slike poveča za a jasnejši pogled.

The ZooMove plugin je odličen način ponovite ta učinek na vašem spletnem mestu. To je poganja jQuery, tako da lahko to hitro dosežete in hitro delate brez veliko kode.

ZooMove je popolnoma brezplačen in odprtokoden na GitHub za vse radovedne razvijalce. Lahko ga namestite npm, Bower, Preja, ali prenesete neposredno iz CDNJS.

Za nastavitev slike ZooMove potrebujete tri posebne datoteke v glavi strani:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Obe datoteki ZooMove lahko zmanjšamo če želite hitrejše nalaganje strani. Datoteko CSS lahko združite tudi v glavno slogovno datoteko, če je to lažje.

Vsa resnična magija se zgodi v HTML-ju, kjer lahko nastavi HTML5 podatkov- * atributi za različne učinke.

To vam omogoča, da ustvarite svoje lastni učinek povečave temelji na štirih različnih parametrih:

1. podatkovno-zoo-lestvico - opredeljuje skupna velikost povečave med lebdenjem (npr. 2,0 za 200%)
2. Data-zoo-move - določa, ali je slika se premika skupaj s kazalcem
3. podatki-zoo-over - določa povečano sliko pojavijo nad izvirnikom
4. data-zoo-kurzor - opredeljuje kazalec

Končni peti parameter vam omogoča, da določite kaj URL nove slike biti (če je potrebno).

ZooMove lahko uporabite v vseh večjih brskalnikih, vključno z IE9 +. Ta vtičnik je široko podprta in ponuja eno vročo uporabniško izkušnjo.

Če iščete a preprosta knjižnica s premikanjem proti povečavi ZooMove je odlična izbira. To je dovolj lahek teči na kateri koli spletni strani in je poganja jQuery, tako da vam ne bo treba pisati toliko kode, da bo delovala.

Obiščite glavno stran, da jo vidite v akciji, in si oglejte dokumentacijo na GitHub, če želite izvedeti več.