Voeg vergrooteffect toe aan uw webpagina met jfMagnify

Er zijn veel gratis zoomplugins die ongelooflijk goed werken. De meeste hiervan zijn echter gemaakt voor afbeeldingen en geven aanwijzingen voor alleen inhoud .

Wat als u een vergrooteffect aan elk deel van uw webpagina zou kunnen toevoegen? Dankzij jfMagnify kan dat.

Het is een gratis jQuery-plug-in die niet alleen het zoomen van afbeeldingen ondersteunt, maar ook het volledige zoombereik van de pagina . Het is een van de weinige plug-ins waarmee u ook het vergrotingsniveau kunt kiezen en touch-evenementen voor mobiele gebruikers ondersteunt.

Merk op dat deze plug-in een beetje zwaar kan aanvoelen omdat hij afhankelijk is van twee afhankelijkheden : normale jQuery- en jQuery-gebruikersinterface . Dit zijn beide nodig om jfMagnify naar behoren te laten werken. Om nog maar te zwijgen over het daadwerkelijke jfMagnify-script dat u op uw pagina moet opnemen.

De opstelling is een beetje lastig omdat je alleen vergrote elementen in een container kunt richten . Als u de hele pagina wilt targeten, moet u een les over uw hele website opnemen .

Hier is hoe de enkele regel van jQuery eruit zou zien:

 $ ( "Vergroten") jfMagnify (.); 

Dit is gericht op alle elementen binnen de .magnify container die meestal een div element is.

Deze interne elementen kunnen afbeeldingen zijn, maar kunnen ook kleine lettertjes bevatten, bijvoorbeeld op sitevoorwaarden of pagina's met privacybeleid. Alle documentatie is beschikbaar in de GitHub-repo, dus zodra je het hebt ingesteld, wordt het hele proces een stuk eenvoudiger.

Bovendien is deze plug-in erg wispelturig en bevat deze veel containervoorschriften . Het containerelement kan bijvoorbeeld geen statische CSS-positie hebben, dus het moet relatief, absoluut of vast zijn.

Je kunt alle standaardstijlregels vinden in de GitHub-repo, maar het kan lastig zijn om aan te passen als je lay-out al is ingebouwd en wordt uitgevoerd. De voordelen van jfMagnify zijn voor mij de moeite waard. Echt, het hangt af van uw behoeften en of u van de interface houdt.

Neem een ​​kijkje op de documenten op GitHub om te zien wat je ervan vindt. En u kunt ook een voorbeeld van de interface op CodePen bekijken als u de bibliotheek in actie wilt zien voordat u deze installeert.