Tilføj forstørrende effekt på din webside med jfMagnify
Der er masser af gratis zoom plugins det virker utroligt godt. Imidlertid er de fleste af disse bygget til billeder og de angiver retninger for billede-kun indhold.
Hvad hvis du kunne Tilføj en forstørrende effekt til hver del af din webside? Tak til jfMagnify, du kan.
Det er en gratis jQuery-plugin der understøtter ikke bare billedzoomning, men også hele siden zooming. Det er et af de få plugins, der også lader dig Vælg forstørrelsesniveauet og understøtter berøringshændelser til mobile brugere.
Bemærk dette plugin kan føles lidt tungt, fordi det afhænger af to afhængigheder: almindelig jQuery og jQuery UI. Disse er begge nødvendige for at få jfMagnify fungerer korrekt. For ikke at nævne faktiske jfMagnify script du skal medtage på din side.
Opsætningen er lidt vanskelig, fordi du kun kan målrette forstørrede elementer i en beholder. Hvis du vil målrette mod hele siden, skal du bruge inkludere en klasse over hele dit websted.
Her er hvordan enkelt linje af jQuery ville se ud:
$ ( "Forstørre") jfMagnify ().;
Dette mål alle elementer inde i .forstørre beholder som normalt er en div element.
Disse interne elementer kan være billeder, men det kan også inkludere lille print, for eksempel på websider eller privatlivspolitiske sider. Al dokumentationen er tilgængelig i GitHub repo, så når du sætter det op, bliver hele processen meget lettere.
Også, dette plugin er meget svagt og kommer med en masse container regler. For eksempel beholderelementet kan ikke have en statisk CSS position, så det er nødvendigt at være relativt, absolut eller fast.
Du kan find alle standard stil regler i GitHub repo, men det kan være en smerte at tilpasse, hvis dit layout allerede er bygget og kører. Fordelene ved jfMagnify er mig værd at gøre. Virkelig afhænger det af dine behov, og om du kan lide grænsefladen.
Tag et kig på docs på GitHub for at se, hvad du synes. Og det kan du også Forhåndsvisning af grænsefladen på CodePen, hvis du vil se biblioteket i aktion, før du installerer det.
