Lägg till förstoringseffekt på din webbsida med jfMagnify
Det finns gott om gratis zoomning plugins det fungerar otroligt bra. Dock är de flesta av dessa byggd för bilder och de anger riktningar för bildinnehåll.
Vad händer om du kan Lägg till en förstoringseffekt till alla delar av din webbsida? Tack vare jfMagnify, du kan.
Det är en gratis jQuery-plugin som inte bara stödjer bildzoom, men också hela sidan zoomning. Det är en av de få plugins som också låter dig välj förstoringsnivån och stöder beröringshändelser för mobila användare.
Observera att detta plugin kan känna lite tungt eftersom det är det förlitar sig på två beroenden: vanlig jQuery och jQuery UI. Dessa är båda nödvändiga för att få jfMagnify fungera korrekt. För att inte tala om faktiskt jfMagnify script du måste inkludera på din sida.
Inställningen är lite knepig eftersom du bara kan rikta in förstorade element inom en behållare. Om du vill rikta in hela sidan behöver du inkludera en klass över hela din webbplats.
Så här är det enda rad av jQuery skulle se ut:
$ ( "Tora") jfMagnify ().
Detta riktar sig alla element inuti .förstora behållare som vanligtvis är en div element.
Dessa interna element kan vara bilder, men kan också Inkludera små utskrifter, till exempel på platsvillkor eller sekretesspolicy sidor. All dokumentation är tillgänglig i GitHub repo, så när du ställer upp det blir hela processen mycket lättare.
Dessutom är denna plugin väldigt liten och kommer med många containerregler. Till exempel behållarelementet kan inte ha en statisk CSS-position, så det behöver antingen vara relativt, absolut eller fast.
Du kan hitta alla standard stil regler i GitHub repo men det kan vara synd att anpassa om din layout redan är byggd och körd. Fördelarna med jfMagnify är för mig värt ansträngningen. Egentligen beror det på dina behov och om du gillar gränssnittet.
Ta en titt på dokumenten på GitHub för att se vad du tycker. Och det kan du också förhandsgranska gränssnittet på CodePen om du vill se biblioteket i åtgärd innan du installerar det.
