Comment zoomer des images comme moyen

La plate-forme de blogs Medium utilise un effet de zoom d'image personnalisé sur leurs pages de blog. Chaque fois que l'utilisateur clique sur une image, elle s'agrandit automatiquement..

C'est un très bon effet et certainement unique à Medium, mais ce n'était jamais quelque chose qui pourrait être facilement copié.

Maintenant, avec le MediumLightbox script, c'est plus facile que jamais. Ce script JS est léger et facile à ajouter à tout site Web ou blog.

Si vous souhaitez voir comment cela fonctionne, vous pouvez visiter le page de démonstration en direct animé par le créateur Davide Calignano.

Il passa un moment à définir la transition exacte et l'effet d'animation personnalisé pour créer une image miroir du zoom de l'image de Medium. La bibliothèque entière est écrit en JavaScript pur, de sorte qu'il ne compte pas sur 3^rd les scripts de partie tels que jQuery.

Vous aurez besoin de connaître un peu JS pour le configurer, mais vous n'avez certainement pas besoin d'être un expert..

Chaque image peut prendre attributs data- * pour régler la hauteur et la largeur en taille réelle, qui sont toutes tiré dynamiquement depuis le plugin lightbox. Le code d'installation est très simple et il peut cibler les images elles-mêmes, ou des conteneurs comme le

élément.

Voici l'extrait de code unique dont vous avez besoin pour que le plug-in fonctionne:

 MediumLightbox ('figure.zoom-effect'); 

À l'intérieur de la fonction, vous allez passer un sélecteur pour tous les éléments (par exemple.

) avec le .effet de zoom classe. Cette classe est spécifiquement défini dans la feuille de style MediumLightbox, il est donc préférable de l'utiliser également sur votre page.

Et, une fois que c'est mis en place, vous êtes tous ensemble!

Dans la zone de contenu de votre page, vous pouvez envelopper toutes les images dans un

balise utilisant cette classe. Ils auront automatiquement cet effet moyen-aimé bien-aimé Moyen pour les utilisateurs de bureau et mobiles.

Pour télécharger une copie de ce script et commencer, visitez le référentiel principal de GitHub. Ici, vous trouverez aussi documentation avec extraits de code vous pouvez copier pour vous installer rapidement.