Ajoutez un effet de loupe sur votre page Web avec jfMagnify
Il y a beaucoup de plugins de zoom gratuits cela fonctionne incroyablement bien. Cependant, la plupart d'entre eux sont construit pour des images et ils spécifient les directions pour contenu uniquement image.
Et si vous pouviez ajouter un effet grossissant à chaque partie de votre page Web? Grâce à jfMagnify, vous pouvez.
C'est un plugin jQuery gratuit qui prend en charge non seulement le zoom d’image, mais aussi zoom de la page entière. C’est l’un des rares plugins qui vous permet également choisissez le niveau de grossissement et prend en charge les événements tactiles pour les utilisateurs mobiles.
Notez que ce plugin peut sembler un peu lourd car il repose sur deux dépendances: jQuery régulier et jQuery UI. Ces deux éléments sont nécessaires pour que jfMagnify fonctionne correctement. Sans parler de la script jfMagnify actuel vous aurez besoin d'inclure sur votre page.
La configuration est un peu délicate car vous ne pouvez cibler que des éléments agrandis dans un conteneur. Si vous souhaitez cibler toute la page, vous devez inclure une classe sur l'ensemble de votre site web.
Voici comment une seule ligne de jQuery ressemblerait à ceci:
$ (". magnify"). jfMagnify (); Cette cible tous les éléments à l'intérieur du .amplifier récipient qui est généralement un div élément.
Ces éléments internes peuvent être des images, mais pourraient aussi inclure les petits caractères, par exemple, les conditions du site ou les pages de politique de confidentialité. Toute la documentation est disponible dans le repo GitHub, Donc, une fois que vous l'avez configuré, l'ensemble du processus devient beaucoup plus facile.
En outre, ce plugin est très capricieux et vient avec beaucoup de règles de conteneur. Par exemple, l'élément conteneur ne peut pas avoir une position CSS statique, il doit donc être soit relatif, absolu ou fixe.
Vous pouvez trouver toutes les règles de style par défaut dans le dépôt GitHub, mais il pourrait être difficile de personnaliser si votre mise en page est déjà construite et en cours d’exécution. Les avantages de jfMagnify valent la peine, à mon avis. Cela dépend vraiment de vos besoins et du fait que vous aimiez l'interface.
Jetez un coup d'œil aux docs sur GitHub pour voir ce que vous en pensez. Et vous pouvez aussi prévisualiser l'interface sur CodePen si vous voulez voir la bibliothèque en action avant de l'installer.
