Widget zoom loupe sur les visuels articles

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Qu'est-ce que le widget « Zoom loupe sur les visuels articles » ?

Le widget « Zoom loupe sur les visuels articles » vous permet de mettre en valeur vos articles dans les moindres détails : vos visuels sont zoomés instantanément par un effet loupe au passage de la souris. En pratique, l'agrandissement visualisé dans l'encadré loupe est effectué grâce au format zoom de votre image. Il s'applique sur les différents visuels liés à votre article (de 1 à 5 images).
Par défaut, cette documentation vous permet de mettre en place le zoom loupe présenté en exemple n°1 (ci-dessous). Vous pourrez ensuite paramétrer d'autres effets, en suivant, pour cela, la procédure décrite dans la rubrique "Personnalisation du widget".

N.B. : l'affichage d'images spécifiques pour chaque sous-référence de l'article sera désactivé avec ce widget.

Voir le site démo

Voir le site démo Exemples d'utilisations du widget « Zoom loupe sur les visuels articles »


Caractéristiques

Version minimale requise : PowerBoutique© V4.6.2
Technologies utilisées : HTML / CSS / JS
Navigateurs compatibles : Firefox.gif Chrome.gif Ie.gif Safari.gif Opera.gif
Versions : Francais.gif   Anglais.gif

Dernières modifications : le 25 mars 2014

La procédure suivante a été conçue pour vous permettre d'installer ce widget de façon autonome.
L'intégration et le fonctionnement de ce widget sont conditionnés aux intitulés des dossiers et des fichiers précisés dans cette procédure. Nous vous recommandons de ne pas les renommer.
N.B. : un widget est une extension technique d'une ou plusieurs fonctionnalités du logiciel PowerBoutique©. Les procédures de mise en place et de personnalisation ne sont pas couvertes par l’Assistance Utilisateurs.

Étapes d'intégration

  • Étape 2
    Via la fonction "Import/Export" > "Espace de stockage", créez un nouveau dossier "zoom" dans le dossier /site en cliquant sur le bouton "Nouveau dossier".

  • Étape 3
    Via la même page, cliquez sur le nouveau dossier /zoom, puis sur le bouton "Ajouter" et enfin sur "Parcourir...". Ouvrez un à un les 7 fichiers que vous avez téléchargé dans l'étape 1 et cliquez sur "OK".

  • Étape 4
    Il faut maintenant ajouter le code du widget dans le modèle fiche articles de votre choix. Via la fonction "Apparence" > onglet "Outils experts - Web-design" > "Modèles fiche articles", sélectionnez, dans le menu déroulant en haut à droite, "site FR" ou "site US" selon la version sur laquelle vous voulez intégrer ce widget puis sélectionnez, dans le menu déroulant des modèles de mise en page articles, celui que vous voulez modifier. Cliquez sur le bouton "Modifier". Dans l'écran suivant, cliquez sur l'onglet HTML et insérez le code ci-dessous (FR ou US) à la place du code *Image* déjà existant. Nous vous conseillons également d'enlever le code *lienImageZoom* qui correspond au lien zoom, celui ci n'est pas compatible avec ce widget. Enfin, cliquez sur "Enregistrer".

    Version Française Francais.gif :
     1 <!-- DEBUT - Widget zoom loupe sur les visuels articles -->
     2 
     3 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
     4 <script type="text/javascript" src="../site/zoom/jquery.jqzoom-core.js"></script>
     5 <script type="text/javascript" src="../site/zoom/zoom_fr.js"></script>
     6 <link rel="stylesheet" type="text/css" href="../site/zoom/zoom_fr.css">
     7 
     8 <a href="*UrlZoom*" class="jqZoom_zoom" title="*NomProduitBrut*" rel="jqZoom_gallerie">
     9     <img src="*UrlIllustration*" title="*NomProduitBrut*" >
    10 </a>
    11  
    12 <div id="jqZoom_vignettes">
    13 <script>
    14 var monPattern = /^(\*UrlIllustration).+/;
    15 if(!monPattern.exec("*UrlIllustration*") && "*UrlIllustration*" != ""){document.write('<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: \'jqZoom_gallerie\', smallimage: \'*UrlIllustration*\',largeimage: \'*UrlZoom*\'}"><img src="*UrlIllustration*"></a>');};
    16 if(!monPattern.exec("*UrlIllustration2*") && "*UrlIllustration2*" != ""){document.write('<a href="javascript:void(0);" rel="{gallery: \'jqZoom_gallerie\', smallimage: \'*UrlIllustration2*\',largeimage: \'*UrlZoom2*\'}"><img src="*UrlIllustration2*"></a>');};
    17 if(!monPattern.exec("*UrlIllustration3*") && "*UrlIllustration3*" != ""){document.write('<a href="javascript:void(0);" rel="{gallery: \'jqZoom_gallerie\', smallimage: \'*UrlIllustration3*\',largeimage: \'*UrlZoom3*\'}"><img src="*UrlIllustration3*"></a>');};
    18 if(!monPattern.exec("*UrlIllustration4*") && "*UrlIllustration4*" != ""){document.write('<a href="javascript:void(0);" rel="{gallery: \'jqZoom_gallerie\', smallimage: \'*UrlIllustration4*\',largeimage: \'*UrlZoom4*\'}"><img src="*UrlIllustration4*"></a>');};
    19 if(!monPattern.exec("*UrlIllustration5*") && "*UrlIllustration5*" != ""){document.write('<a href="javascript:void(0);" rel="{gallery: \'jqZoom_gallerie\', smallimage: \'*UrlIllustration5*\',largeimage: \'*UrlZoom5*\'}"><img src="*UrlIllustration5*"></a>');};
    20 </script>
    21 </div>
    22 
    23 <!-- FIN - Widget zoom loupe sur les visuels articles -->
    
    Version Anglaise Anglais.gif :
     1 <!-- DEBUT - Widget zoom loupe sur les visuels articles -->
     2 
     3 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
     4 <script type="text/javascript" src="../site/zoom/jquery.jqzoom-core.js"></script>
     5 <script type="text/javascript" src="../site/zoom/zoom_us.js"></script>
     6 <link rel="stylesheet" type="text/css" href="../site/zoom/zoom_us.css">
     7 
     8 <a href="*UrlZoom*" class="jqZoom_zoom" title="*NomProduitBrut*" rel="jqZoom_gallerie">
     9     <img src="*UrlIllustration*" title="*NomProduitBrut*" >
    10 </a>
    11  
    12 <div id="jqZoom_vignettes">
    13 <script>
    14 var monPattern = /^(\*UrlIllustration).+/;
    15 if(!monPattern.exec("*UrlIllustration*") && "*UrlIllustration*" != ""){document.write('<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: \'jqZoom_gallerie\', smallimage: \'*UrlIllustration*\',largeimage: \'*UrlZoom*\'}"><img src="*UrlIllustration*"></a>');};
    16 if(!monPattern.exec("*UrlIllustration2*") && "*UrlIllustration2*" != ""){document.write('<a href="javascript:void(0);" rel="{gallery: \'jqZoom_gallerie\', smallimage: \'*UrlIllustration2*\',largeimage: \'*UrlZoom2*\'}"><img src="*UrlIllustration2*"></a>');};
    17 if(!monPattern.exec("*UrlIllustration3*") && "*UrlIllustration3*" != ""){document.write('<a href="javascript:void(0);" rel="{gallery: \'jqZoom_gallerie\', smallimage: \'*UrlIllustration3*\',largeimage: \'*UrlZoom3*\'}"><img src="*UrlIllustration3*"></a>');};
    18 if(!monPattern.exec("*UrlIllustration4*") && "*UrlIllustration4*" != ""){document.write('<a href="javascript:void(0);" rel="{gallery: \'jqZoom_gallerie\', smallimage: \'*UrlIllustration4*\',largeimage: \'*UrlZoom4*\'}"><img src="*UrlIllustration4*"></a>');};
    19 if(!monPattern.exec("*UrlIllustration5*") && "*UrlIllustration5*" != ""){document.write('<a href="javascript:void(0);" rel="{gallery: \'jqZoom_gallerie\', smallimage: \'*UrlIllustration5*\',largeimage: \'*UrlZoom5*\'}"><img src="*UrlIllustration5*"></a>');};
    20 </script>
    21 </div>
    22 
    23 <!-- FIN - Widget zoom loupe sur les visuels articles -->
    


Personnalisation du widget (facultatif)

Il est possible de personnaliser l'apparence de ce widget.

Remarques concernant les extraits de codes :
Les numéros de lignes sont précisés à titre indicatif sur la base des fichiers téléchargés dans l'étape 1 d'intégration. Ces numéros peuvent varier, en fonction des modifications apportées aux fichiers ou du logiciel utilisé pour les éditer.
Les textes entourés de /* ... */ ou <! -- ... --> ou encore // ... // sont des commentaires. Ils sont là pour vous aider dans la compréhension du code. Une partie de code commentée ne sera pas visible sur votre site.

Paramétrer les options du widget
  • Le widget se compose d'une dizaine d'options paramétrables.
    Il faut éditer le fichier "zoom_fr.js" pour la Version Française et le fichier "zoom_us.js" pour la Version Anglaise. Vous pouvez donc appliquer des paramètres différents pour vos sites FR et US.
    Ouvrez ce(s) fichier(s) (que vous avez téléchargé à l'étape 1, pendant l'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.
    Les paramètres se trouvent entre la ligne 6 et la ligne 20.

    Voici une liste d'explications des différentes options du widget, ainsi que des valeurs qu'elles peuvent prendre (à chaque fois, un exemple sera présent sur cette page : Démos zoom loupe) :

zoomType : permet de choisir le type de zoom :

- 'standard' : zoom de la zone survolée par la souris, l'image garde son opacité de départ (exemples 2 et 3).
- 'reverse' : zoom de la zone survolée par la souris avec opacité de l'image (exemples 1 et 5).
- 'drag' : zoom de la zone par glissement de la souris (exemple 4).
- 'innerzoom' : zoom affiché au-dessus de l'image (exemple 6).

N.B. : l'exemple 4 n'est pas compatible avec les écrans tactiles.

imageOpacity : définit l'opacité de l'image lorsque l'option zoomType est réglée sur 'reverse' :

- nombre de 0 à 1.

N.B. : 0 pour une visibilité de 0 %, 1 pour une visibilité de 100 %. Nous vous conseillons de mettre 0.5 pour une visibilité de 50 % (exemples 1 et 5).

alwaysOn : permet de choisir une visibilité permanente pour la zone du zoom loupe :

- true : la zone sera toujours visible (exemple 3).
- false : la zone sera masquée si on ne survole plus l'image (exemples 1, 2, 5).

N.B. : cette option est inutile lorsque l'option zoomType est réglée sur 'drag' (exemple 4).

title : permet de gérer l'affichage du titre de l'article dans la zone du zoom loupe :

- true : affichera le titre de l'article (exemples 1, 4, 6).
- false : n'affichera pas le titre de l'article (exemples 2, 3, 5).

zoomWidth : définit la largeur de la zone du zoom loupe :

- nombre en pixels.

N.B. : 200px pour les exemples 1, 2, 3, 4, 5, 6.

zoomHeight : définit la hauteur de la zone du zoom loupe :

- nombre en pixels.

N.B. : 200px pour les exemples 1, 3, 4, 5, 6. 100px pour l'exemple 2.

position : définit de quel côté de l'image principale apparaît la zone du zoom loupe :

- 'left' : la zone du zoom loupe est à gauche (exemples 2, 4).
- 'right' : la zone du zoom loupe est à droite (exemples 1, 3, 5).
- 'top' : la zone du zoom loupe est en haut.
- 'bottom' : la zone du zoom loupe est en bas.

N.B. : cette option est inutile lorsque l'option zoomType est réglée sur 'innerzoom' (exemple 6).

xOffset : définit la position horizontale de la zone du zoom loupe par rapport à l'image principale :

- nombre en pixel.

N.B. : 100px déplacera la zone du zoom loupe vers la droite de 100px si l'option position est réglée sur 'right' ou vers la gauche si l'option position est réglée sur 'left' .

yOffset : définit la position verticale de la zone du zoom loupe par rapport à l'image principale :

- nombre en pixel.

N.B. : 100px déplacera la fenêtre vers le haut de 100px si l'option position est réglée sur 'top' ou vers le bas si l'option position est réglée sur 'bottom' .

showEffect: permet d'ajouter un effet de transition pour l'affichage de la zone du zoom loupe :

- fadein : affichera un effet de transition (exemples 2, 5).
- show : n'affichera pas d'effet de transition (exemples 1, 6).

hideEffect: permet d'ajouter un effet de transition pour le masquage de la zone du zoom loupe :

- fadeout : affichera un effet de transition (exemples 2, 5).
- hide : n'affichera pas d'effet de transition (exemples 1, 6).

fadeinSpeed : définit la durée de la transition pour l'affichage de la zone du zoom loupe si l'option showEffect est réglée sur 'fadein' :

- 'fast' : la transition sera rapide.
- 'slow' : la transition sera lente.
- nombre en millisecondes : permet de définir une durée de transition à la milliseconde près.

fadeoutSpeed : définit la durée de la transition pour le masquage de la zone du zoom loupe si l'option hideEffect est réglée sur 'fadeout' :

- 'fast' : la transition sera rapide.
- 'slow' : la transition sera lente.
- nombre en millisecondes : permet de définir une durée de transition à la milliseconde près.

preloadText : définit le texte affiché pendant le chargement des images :

- vous pouvez écrire ici le texte de votre choix. Pour nos 6 exemples, nous avons choisi le texte 'Chargement'.

preloadImages : permet de précharger les images :

- true : activation du préchargement des images.
- false : désactivation du préchargement des images.


Modifier la largeur des miniatures

Pour modifier la largeur des images miniatures, il vous faut éditer le fichier "zoom_fr.css" pour la Version Française et le fichier "zoom_us.css" pour la Version Anglaise.
Ouvrez ce(s) fichier(s) (que vous avez téléchargé à l'étape 1, pendant l'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.
Cherchez, sur la ligne 5, le code "width: 35px;" et modifiez le nombre "35px" (augmentez-le pour élargir les miniatures, diminuez-le pour les rétrécir). Enregistrez le(s) fichier(s) (gardez le format .css et le même nom).
Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /zoom, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir", et enfin sur "OK".

Pour nos 6 exemples, la valeur de 35px était trop petite, nous avions besoin d'une largeur de 50px. Nous avons donc édité le fichier "zoom_fr.css" pour la Version Française :

Francais.gif
5 width: 50px; /* "width: 35px;" devient  "width: 50px;" */


Idem pour le fichier "zoom_us.css" de la Version Anglaise :

Anglais.gif
5 width: 50px; /* "width: 35px;" devient  "width: 50px;" */



Définir la hauteur des miniatures
  • Par défaut, la hauteur des images miniatures n'est pas paramétrée, elle est calculée automatiquement en fonction de leur largeur.
    Pour définir une hauteur spécifique des miniatures, il vous faut éditer le fichier "zoom_fr.css" pour la Version Française et le fichier "zoom_us.css" pour la Version Anglaise.
    Ouvrez ce(s) fichier(s) (que vous avez téléchargé à l'étape 1, pendant l'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.
    Ajoutez après la ligne 5, la ligne suivante "height: 35px;".
    Précisez ensuite la hauteur de votre choix à la place de 35px. Enregistrez le(s) fichier(s) (gardez le format .css et le même nom).
    Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /zoom, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir", et enfin sur "OK".

Exemple de vignettes redimensionnées avec une largeur de 30px et une hauteur définie de 30px, pour obtenir un rendu carré sur la Version Française ("zoom_fr.css") :

Francais.gif
5 width: 30px;
6 height: 30px;


Idem pour le fichier "zoom_us.css" de la Version Anglaise :

Anglais.gif
5 width: 30px;
6 height: 30px;



Services d'intégration et de personnalisation des widgets PowerBoutique©

Nos équipes sont à votre disposition pour intervenir depuis l'intégration de ce widget jusqu'à sa personnalisation complète, selon vos besoins et les spécificités de votre site.
Contactez votre consultant e-business pour en savoir plus : cliquez ici.



Cet espace de documentation vise à vous aider dans la personnalisation avancée de votre site PowerBoutique©. L'Assistance Utilisateurs PowerBoutique© ne couvre pas l'utilisation que vous pouvez faire des informations issues de cette documentation. cf. Conditions d'utilisation