Nicolas Menard [Medialibs]
Il est maintenant possible d'utiliser un nouveau module afin de visualiser les images additionnelles 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.
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.
Pour télécharger le visualiseur utilisant MooTools :
http://decouvertev1.e-majine.medialibs49.atester.fr/media/mootools__013679900_1042_22042008.zip
Pour télécharger le visualiseur utilisant Scriptaculous :
http://decouvertev1.e-majine.medialibs49.atester.fr/media/scriptaculous__052738100_1042_22042008.zip
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, vous pouvez le placer dans le head dans mainPage.html ou l'intégrer dans les feuilles de styles :
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 :
dans le cas d'une intégration avec Scriptaculous, voici le bloc à installer sur votre page product.html (/modeles/fr/page/catalog/product.html)
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 »
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.
Pour télécharger le visualiseur utilisant MooTools :
http://decouvertev1.e-majine.medialibs49.atester.fr/media/mootools__013679900_1042_22042008.zip
Pour télécharger le visualiseur utilisant Scriptaculous :
http://decouvertev1.e-majine.medialibs49.atester.fr/media/scriptaculous__052738100_1042_22042008.zip
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, vous pouvez le placer dans le head dans mainPage.html ou l'intégrer dans les feuilles de styles :
<!-- 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-->
dans le cas d'une intégration avec Scriptaculous, voici le bloc à installer sur votre page product.html (/modeles/fr/page/catalog/product.html)
<!-- 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 »