Legg forstørrende effekt på websiden din med jfMagnify

Det er nok av gratis zooming plugins det fungerer utrolig bra. Imidlertid er de fleste av disse bygget for bilder og de spesifiserer retninger for bildeinnhold.

Hva om du kunne legg til en forstørrende effekt til alle deler av websiden din? Takk til jfMagnify, du kan.

Det er en gratis jQuery-plugin som ikke bare støtter bildezoom, men også hele siden zoomer. Det er en av de få plugins som også lar deg velg forstørrelsesnivået og støtter berøringshendelser for mobilbrukere.

Merk dette pluginet kan føles litt tungt fordi det stoler på to avhengigheter: vanlig jQuery og jQuery brukergrensesnitt. Disse er begge nødvendige for å få jfMagnify fungerer riktig. Ikke å nevne faktisk jfMagnify script du må inkludere på siden din.

Oppsettet er litt vanskelig fordi du bare kan målrette forstørrede elementer innenfor en beholder. Hvis du vil målrette hele siden, må du ta med en klasse over hele nettstedet ditt.

Her er hvordan enkelt linje av jQuery ville se ut som:

 $ ( "Foredle") jfMagnify (.); 

Dette mål alle elementene inne i .tørre container som vanligvis er en div element.

Disse interne elementene kan være bilder, men kan også inkludere liten utskrift, for eksempel på sidevilkår eller personvernspolitiske sider. All dokumentasjonen er tilgjengelig i GitHub repo, så når du setter det opp, blir hele prosessen mye lettere.

Også, dette pluginet er veldig svakt og følger med mange containerregler. For eksempel beholderelementet kan ikke ha en statisk CSS-posisjon, så det må enten være relativt, absolutt eller fast.

Du kan finn alle standard stil regler i GitHub repo, men det kan være vondt å tilpasse om layoutet ditt allerede er bygget og kjørt. Fordelene med jfMagnify er, for meg, verdt innsatsen. Egentlig, det avhenger av dine behov og om du liker grensesnittet.

Ta en titt på dokumentene på GitHub for å se hva du synes. Og det kan du også forhåndsvisning av grensesnittet på CodePen hvis du vil se biblioteket i aksjon før du installerer det.