Appliquer l'effet de zoom lisse aux images avec Zoomer
Il y a une citation qui dit «une image vaut mille mots». Dans le web design, cela devient encore plus pertinent. Surtout quand il s'agit de mettre en valeur des produits, comme dans un site de commerce électronique par exemple. Les gens doivent avoir une compréhension claire et être capables de regarder le produit d'une manière visuelle avant de faire un achat après tout.
Faire l'image la plus grande possible ne peut pas résoudre ce problème, car il faudra aussi une énorme quantité d'espace disponible. Par conséquent, le meilleur choix est de rendre l'image zoomable. Avec Zoomer, vous pouvez y arriver facilement.
Zoomer est une bibliothèque javascript gratuite qui permet à votre image d'être zoomable . Quand il est activé, il va ajouter son propre style et un bouton pour zoomer et dézoomer. Il prend également en charge plusieurs images, qui seront automatiquement transformées en une galerie d'images.
Initialisation
Avant de l'initialiser, incluez d'abord le script Zoomer (que vous pouvez obtenir depuis la page GitHub) dans votre projet comme ceci:
Zoomer entoure l'image avec son style et ajoute un bouton de zoom avant et arrière. Vous devez également inclure la feuille de style Zoomer avant la balise de fermeture de la head
.
.. ..
Zoom avant et arrière
Pour créer un nouveau Zoomer, incluez facilement une image dans un wrapper. N'oubliez pas de donner à l'emballage une hauteur et une largeur fixes, car tout le contenu disponible sera rempli par le nouveau balisage. Par exemple, je crée un wrapper avec le nom de .zoomable
et définissez la hauteur à 500px et la largeur à 100% comme .zoomable
:
.zoomable {hauteur: 500px; largeur: 100%; }
Puis j'enveloppe l'image que je veux faire zoomer, comme ci-dessous:
Plus de temps de vacances pourrait-il améliorer votre productivité? [30 pays comparés]
Le Japon, connu pour sa culture bourreau de travail, a fait la une des journaux lorsque son gouvernement envisageait d'adopter une loi obligeant ses travailleurs à prendre congé. Il y a beaucoup de raisons qui contribuent à une décision aussi radicale, y compris la pensée que cette initiative pourrait aider à relancer la croissance économique du Japon après des années de stagnation.est-ce v
20 thèmes WordPress Starter pour les développeurs
Pour ceux d'entre vous qui veulent faire un WordPress Thèmes, mais ne savent pas par où commencer, les thèmes WordPress de démarrage sont un moyen pratique de commencer. Ce dont vous avez besoin pour faire fonctionner le thème du starter, c'est de l'ajuster et de le mettre dans le thème génial qu'il a le potentiel d'être.Beaucou