Comment zoomer des images comme moyen

La plateforme de blogging Medium utilise un effet de zoom sur les pages de son blog. Chaque fois que l'utilisateur clique sur une image, il agrandira automatiquement sa taille.

C'est un excellent effet et certainement unique à Medium, mais ce n'était jamais quelque chose qui pouvait facilement être copié.

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

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

Il a passé un certain temps à clouer 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 écrite en JavaScript pur, de sorte qu'elle ne repose sur aucun script tiers tel 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 des attributs data- * pour définir la hauteur et la largeur en taille réelle, toutes tirées dynamiquement du plugin lightbox. Le code d'installation est très simple et 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 exécuter le plug-in:

 MediumLightbox ('figure.zoom-effect'); 

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

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

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

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

tag utilisant cette classe. Ils obtiendront automatiquement cet effet "click-to-zoom" bien-aimé moyen pour les utilisateurs de bureau et mobiles .

Pour télécharger une copie de ce script et commencer, visitez le dépôt principal de GitHub. Ici, vous trouverez également de la documentation ainsi que des extraits de code que vous pouvez copier pour vous installer rapidement.

Comment supprimer complètement votre empreinte digitale

Que vous souhaitiez améliorer votre vie privée en ligne, ou que vous ayez besoin de supprimer des empreintes embarrassantes, la suppression de votre présence en ligne peut être un peu difficile . Se souvenir de tout ce que vous avez fait en ligne et l'enlever est presque impossible.Ne vous inquiétez pas, si vous voulez vous effacer complètement d'Internet ou même minimiser votre empreinte, alors continuez à lire et découvrez comment trouver et supprimer des informations en ligne sur vous-même.Remarque:

(Conseils techniques et de conception)

Ouvrez les navigateurs et les clients d'email de votre choix avec Bumpr

Mac: Pour ceux d'entre nous qui utilisent plusieurs navigateurs et clients de messagerie, il arrive un moment où l'échange de clients et de navigateurs peut s'avérer très incommode.Cependant, si vous utilisez un macOS, ces problèmes de saut de navigateur / client peuvent être résolus avec une seule application appelée " Bumpr " .Disponi

(Conseils techniques et de conception)