Voeg vergrooteffect toe aan uw webpagina met jfMagnify

Er zijn genoeg van gratis zoomplugins dat werkt ongelooflijk goed. De meeste hiervan zijn echter gebouwd voor afbeeldingen en zij geven aanwijzingen voor beeld-alleen inhoud.

Wat als je kon voeg een vergrooteffect toe op elk deel van uw webpagina? Dankzij jfMagnify, jij kan.

Het is een gratis jQuery-plug-in dat ondersteunt niet alleen het zoomen van afbeeldingen, maar ook hele pagina zoomen. Het is een van de weinige plug-ins waarmee je ook kunt kies het vergrotingsniveau en ondersteunt touch-evenementen voor mobiele gebruikers.

Merk op dat deze plug-in een beetje zwaar kan voelen omdat hij vertrouwt op twee afhankelijkheden: reguliere jQuery en jQuery UI. Dit zijn beide nodig om jfMagnify naar behoren te laten werken. Om nog maar te zwijgen over het daadwerkelijk jfMagnify-script je moet op je pagina opnemen.

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

Hier is hoe het enkele regel van jQuery zou er als volgt uitzien:

 $ ( "Vergroten") jfMagnify (.); 

Dit doelen alle elementen binnen de .vergroten houder wat meestal een is div element.

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

Ook is deze plug-in erg wispelturig en wordt geleverd met veel containerregels. Bijvoorbeeld het containerelement kan geen statische CSS-positie hebben, het moet dus relatief, absoluut of vast zijn.

Jij kan vind alle standaardstijlregels in de GitHub-repo, maar het kan lastig zijn om deze 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 je kunt ook een voorbeeld van de interface op CodePen als je de bibliotheek in actie wilt zien voordat je hem installeert.