hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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.

Générez des codes d'intégration réactifs facilement avec cette application gratuite

Générez des codes d'intégration réactifs facilement avec cette application gratuite

Chaque concepteur Web sait comment intégrer des vidéos . L'intégration est le moyen le plus simple de partager du contenu et d'améliorer vos articles avec des médias pertinents.Cependant, il y a un problème avec les iframes et autres intégrations vidéo similaires: le manque de solutions réactives . Chaque

(Conseils techniques et de conception)

9 façons de faire plus de ventes de commerce électronique avec Pinterest

9 façons de faire plus de ventes de commerce électronique avec Pinterest

Êtes-vous déjà sur Pinterest? Sinon, vous devez absolument monter à bord . Quiconque a utilisé ce réseau social en est tombé amoureux. Et ce "n'importe qui" n'est pas un petit nombre, à moins que vous ne considériez une base d'utilisateurs de 150 millions comme petite.Pinterest est essentiellement une plate - forme pour les utilisateurs de partager visuellement et de découvrir de nouveaux intérêts passionnants en postant, ou «épingler», comme il est populairement appelé, des vidéos ou des images à leurs propres conseils ou à ceux des autres . Le fonctionnement

(Conseils techniques et de conception)