Il est maintenant possible d'utiliser un nouveau module afin de regarder les visuels supplémentaires des produits du catalogue et ceci de façon dynamique et intuitive. Vous pouvez d'une part naviguer entre les images et d'autre part cliquer sur une vignette pour afficher l'image en grand avec ShadowBox.

Un exemple en action est visible ici

Ce module fait appel à du javascript, des feuilles de styles ainsi qu'à du flash. Celui-ci se nourri d'un fichier XML qui est généré lorsque vous intégrez des visuels additionnels dans le manage. A noter qu'il est donc tout à fait possible de créer votre propre animation flash pour afficher les images.

Le fichier flash peut afficher des images de différentes hauteurs prédéfinies à l'avance (90 pixels de hauteur, 135, 180, 240 ou 340), vous devez donc préparer vos images à l'avance suivant votre choix de la liste. Les modes portraits, paysages ou panoramiques sont automatiques. La largeur est maintenant recalculée en fonction de l'image

Vous pouvez utiliser ce module en utilisant les scripts MooTools ou Scriptaculous.

Cliquez ici Pour télécharger le visualiseur utilisant MooTools

Cliquez ici Pour télécharger le visualiseur utilisant Scriptaculous

Attention, ce visualiseur peut générer des conflits de javascript si vous utilisez du JQuery sur votre site. A ce moment là il est conseillé de passer JQuery en mode de compatibilité (voir la méthode « noConflict »).

Analyse des éléments :

Dossier « swf » : C'est ici que l'on trouver les swf spécifiques à chaque taille : pictureflow-H090.swf, pictureflow-H135.swf, pictureflow-H180.swf, pictureflow-H240.swf et pictureflow-H340.swf. C'est un de ces fichiers que vous choisirez d'appeler dans votre site, suivant la hauteur des images désirée.

Dossier «scripts» : plug_flash.js qui permet d’inclure proprement un SWF dans une page web et d’agir simplement sur tous les paramètres du FlashPlayer. shadowbox.js : le programme qui gère ShadowBox shadowbox.css : permet de paramétrer l'apparence de ShadowBox

Dossier « images » : vous trouverez à l'intérieur les images utilisées pour l'interface du ShadowBox (animation du loading, etc...)

L'un des dossiers suivants est nécessaire (Scriptaculous ou MooTools) suivant le fichier zip que vous avez téléchargé :

Dossier « scriptaculous » : "flashShadowboxInjector.js", "shadowbox-prototype.js", "prototype.js", "scriptaculous.js", "effects.js" qui correspondent à l'interface ShadowBox avec script.aculo.us

Dossier « mootools » : "mootools-release-1.11.js", "shadowbox-mootools.js", "flashShadowboxInjector-mootools.js" qui correspondent à l'interface ShadowBox avec MooTools.

Mise en place des fichiers en ftp :

Que ce soit dans la cas de MooTools ou Scriptaculous, il suffit de mettre le fichier « scripts » à la racine de votre site. Voici l'arborescence que vous obtiendrez :

Fichiers plug_flash.js, shadowbox.js, shadowbox.css : mettre ces fichiers à la racine de votre site dans un dossier « scripts » (pour obtenir un chemin de type : /scripts)

Dossier « images » : à mettre dans le dossier scripts (pour obtenir un chemin de type : /scripts/images)

Dossier « swf » : à mettre dans le dossier scripts (pour obtenir un chemin de type : /scripts/swf)

Dossier « mootools » : à mettre dans le dossier scripts (pour obtenir un chemin de type : /scripts/mootools)

Dossier « scriptaculous » : à mettre dans le dossier scripts (pour obtenir un chemin de type : /scripts/scriptaculous) Intégration des scripts dans le site :

Tout d'abord il s'agit d'appeler le style pour l'effet ShadowBox :

<!-- CSS : pour l'effet shadowbox-->
<!-- Pour e-majine vous pouvez le placer dans le head dans mainPage.html ou l'intégrer dans les feuilles de styles -->
<link rel="stylesheet" type="text/css" href="/scripts/shadowbox.css">

Voici ensuite le bloc à installer sur votre page product.html (par exemple : /modeles/fr/Modele1/catalog/product.html) dans le cas d'une intégration avec MooTools :

<!--  COVERFLOW  -->
        <mx:bloc id="coverflow">
        <div>
                <script type="text/javascript" src="/scripts/plug_flash.js"></script>
                <script type="text/javascript" src="/scripts/mootools/mootools-release-1.11.js"></script>
                <script type="text/javascript" src="/scripts/mootools/shadowbox-mootools.js"></script>
                <script type="text/javascript" src="/scripts/mootools/flashShadowboxInjector-mootools.js"></script>
                <script type="text/javascript" src="/scripts/shadowbox.js"></script>
                <script type="text/javascript">window.addEvent('domready', function(){Shadowbox.init();});</script>
                <mx:text id="script" />
                <mx:bloc id="tplScript">
                <script type="text/javascript">
                        var flashVars="";
                        flashVars+="xmlfeed=/getProductImages-coverflow-{idproduct}";
                </script>
                </mx:bloc id="tplScript">
                
                <script type="text/javascript">
                        flashVars+="&lightBox=true";                      // Path to xml file or PHP script
                        flashVars+="&myBckgrnd=0x000000";         // Image Reflection Background (for realistic reflection)
                        flashVars+="&superGlass=false";                   // Transparent reflection switch (for specific background): true or false
                        flashVars+="&myBckGrndImage=";                    // Path to load specific image background
                        flashVars+="&myColor=0xFFFFFF";                   // Image border color: Hex number
                        flashVars+="&myTextColor=0xFFFFFF";               // Tooltip text color: Hex number
                        flashVars+="&mySubTextColor=0xFFFFFF";            // Description text color: Hex number
                        flashVars+="&myArrowColor=0x000000";              // Scrollbar arrow color: Hex number
                        flashVars+="&myScrollColor=0xEF7701";             // Scrollbar color: Hex number
                        flashVars+="&myLoadBarColor=0xEF7701";            // Load bar color: Hex number
                        flashVars+="&myAlpha=0.9";                        // Image border transparency ratio (0 (invisible) to 1 (max opacity))
                        flashVars+="&Border=rounded";                     // Image border aspect "rounded" or "square"
                        flashVars+="&Tooltip=true";                       // Tooltip switch
                        flashVars+="&descText=true";                      // Description text under front image
                        flashVars+="&Scrollbar=true";                     // Scrollbar behavior ("true" = autoHidden, "permanent" = always on, "false" = no scrollbar)
                        flashVars+="&myStep=80";                  // Images pitch
                        flashVars+="&myOffset=40";                        // Front image pitch
                        flashVars+="&scaleDown=75";                       // Inactive images Scale in %
                        flashVars+="&scaleUp=100";                        // Active images Scale in %
                        flashVars+="&MaskScene=false";                    // Scene side mask switch
                        flashVars+="&shownPicture=5";                     // Image shown at start
                        flashVars+="&U_Flow=true";                        // U Flow switch: Linear run or U run for images
                        flashVars+="&descText=true";                      // Description text below front image switch: true or false
                        flashVars+="&scrollbar_Y=220";                    // Y coord of scrollbar: int number
                        flashVars+="&rollOverAnim=false";         // Rollover navigation switch: true or false
                        flashVars+="&easeTime=0.9";                       // Ease transition time (s): Float number
                        flashVars+="&clips2move=8";                       // Number of clips to animate: Int number
                        
                        RunFlash("/scripts/swf/pictureflow-H180.swf", "600", "300", "#000000", "window", "PictureFlow", flashVars);
        </script>
                <noscript>
                  <span class="Style1">You should have Javascript active to see this page</span>
            </noscript>  
        
        </div>
        </mx:bloc id="coverflow">
<!--  FIN COVERFLOW-->

Voici ensuite le bloc à installer sur votre page product.html (/modeles/fr/page/catalog/product.html) dans le cas d'une intégration avec Scriptaculous :

<!--  COVERFLOW  -->
        <mx:bloc id="coverflow">
        <div>

                <script type="text/javascript" src="/scripts/plug_flash.js"></script>
                <script type="text/javascript" src="/scripts/scriptaculous/prototype.js"></script>
                <script type="text/javascript" src="/scripts/scriptaculous/effects.js"></script>
                <script type="text/javascript" src="/scripts/scriptaculous/flashShadowboxInjector.js"></script>
                <script type="text/javascript" src="/scripts/scriptaculous/scriptaculous.js"></script>
                <script type="text/javascript" src="/scripts/scriptaculous/shadowbox-prototype.js"></script>
                <script type="text/javascript" src="/scripts/shadowbox.js"></script>
                <script type="text/javascript">window.onload = Shadowbox.init;</script>
                <mx:text id="script" />
                <mx:bloc id="tplScript">
                <script type="text/javascript">
                        var flashVars="";
                        flashVars+="xmlfeed=/getProductImages-coverflow-{idproduct}";
                </script>
                </mx:bloc id="tplScript">
                
                <script type="text/javascript">
                        flashVars+="&lightBox=true";                      // Path to xml file or PHP script
                        flashVars+="&myBckgrnd=0x000000";         // Image Reflection Background (for realistic reflection)
                        flashVars+="&superGlass=false";                   // Transparent reflection switch (for specific background): true or false
                        flashVars+="&myBckGrndImage=";                    // Path to load specific image background
                        flashVars+="&myColor=0xFFFFFF";                   // Image border color: Hex number
                        flashVars+="&myTextColor=0xFFFFFF";               // Tooltip text color: Hex number
                        flashVars+="&mySubTextColor=0xFFFFFF";            // Description text color: Hex number
                        flashVars+="&myArrowColor=0x000000";              // Scrollbar arrow color: Hex number
                        flashVars+="&myScrollColor=0xEF7701";             // Scrollbar color: Hex number
                        flashVars+="&myLoadBarColor=0xEF7701";            // Load bar color: Hex number
                        flashVars+="&myAlpha=0.9";                        // Image border transparency ratio (0 (invisible) to 1 (max opacity))
                        flashVars+="&Border=rounded";                     // Image border aspect "rounded" or "square"
                        flashVars+="&Tooltip=true";                       // Tooltip switch
                        flashVars+="&descText=true";                      // Description text under front image
                        flashVars+="&Scrollbar=true";                     // Scrollbar behavior ("true" = autoHidden, "permanent" = always on, "false" = no scrollbar)
                        flashVars+="&myStep=80";                  // Images pitch
                        flashVars+="&myOffset=40";                        // Front image pitch
                        flashVars+="&scaleDown=75";                       // Inactive images Scale in %
                        flashVars+="&scaleUp=100";                        // Active images Scale in %
                        flashVars+="&MaskScene=false";                    // Scene side mask switch
                        flashVars+="&shownPicture=5";                     // Image shown at start
                        flashVars+="&U_Flow=true";                        // U Flow switch: Linear run or U run for images
                        flashVars+="&descText=true";                      // Description text below front image switch: true or false
                        flashVars+="&scrollbar_Y=220";                    // Y coord of scrollbar: int number
                        flashVars+="&rollOverAnim=false";         // Rollover navigation switch: true or false
                        flashVars+="&easeTime=0.9";                       // Ease transition time (s): Float number
                        flashVars+="&clips2move=8";                       // Number of clips to animate: Int number
                        
                        RunFlash("/scripts/swf/pictureflow-H180.swf", "600", "300", "#000000", "window", "PictureFlow", flashVars);
        </script>
                <noscript>
                  <span class="Style1">You should have Javascript active to see this page</span>
            </noscript>  
        
        </div>
        </mx:bloc id="coverflow">
<!--  FIN COVERFLOW-->

Paramétrage de l'apparence :

Le script par défaut est paramétré pour être sur un site à fond noir mais il est heureusement tout à fait possible d'en changer l'aspect graphique. Tous les paramètres concernant l'apparence sur trouvent ci-dessus, entre les commentaires « COVERFLOW »