Imprimer la Page | Fermez la fenêtre

Loupe grossissante sur image OE avec blowup.js

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=22472
Date: 29 Mar 2024 à 00:07
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: Loupe grossissante sur image OE avec blowup.js
Posté par: Hobby001
Sujet: Loupe grossissante sur image OE avec blowup.js
Posté le: 10 Jan 2017 à 15:21
Créer un effet de loupe grossissante sur une image OE à l'aide de blowup.js

Étape 1 blowup.js

Téléchargez https://github.com/paulkr/blowup.js
Dans le fichier blowup.js-gh-pages.zip vous trouverez blowup.js-gh-pages\lib\blowup.js, il vous faudra l'extraire du fichier zip.

Ouvrez openElement

Menu du haut
Onglet=> Projet
Groupe=> Gestion
Bouton=> Ressources
Dans le panneau qui vient de s'ouvrir
Onglet=> Autres
Bouton=> Ajouter des fichiers autres
Sélectionnez blowup.js
Fermez le panneau

Étape 2 l'image

Note: L'image d'origine doit être plus grande (en pixels) que l'élément-image que vous emploierez pour l'insérer dans la page.  Le zoom de la lentille est basé sur cette différence.

Dans votre page openElement, insérez un élément-image et renseignez les parametres de l'image telle que désirée.

Menu Propriétés
Onglet=> Propriétés
Groupe=> Comportement
Assurez-vous que le champ "Optimisation auto" n'est pas coché
Groupe=> Expert
Classe Perso=> Inscrivez: zoom

Étape 3 le code

Ajoutez un bloc de code HTML en position header et inscrivez ceci:

<script type="text/javascript" src="/Files/Other/blowup.js"></script>

Ajoutez un bloc de code javascript en position endbody et inscrivez ceci:

$(function(){
  $('.zoom img').blowup();
});
Voilà c'est réglé, il ne reste qu'à publier.

Merci à Dmit dont je n'ai fait que transcrire les directives





-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net