webleads-tracker

Forum

Nouveau : diaporama sur les visuels supplémentaires des produits du catalogue

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 :

 
<!-- 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 »

Pascal Derathé
C'est SUPER Nicolas . Merci
Je n'ai pas pris le temps de tout lire. Je m'y collerai quand j'en aurai vraiment besoin.

Par contre une requête immédiate: Pourquoi ne pas proposer cette "zoulie galerie d'image" dans une option de la galerie d'image avancée de E-Majine. (Lightbox c'est bien ... mais ça serait mieux d'avoir le choix de plusieurs apparence de galeries).

Maintenant que vous avez adapté les sources à e-majine ... ça ne devrait pas être trop compliqué , non ?
Artisan du web à Saint-Genis Laval (près de Lyon)

Thomas Hesse
Bonjour,

Le code de la galerie en elle-même est assez simple et peut en effet être adapté pour servir ailleurs. Par contre, cette animation Flash se nourrit d'un fichier XML, et toute adaptation vers un autre endroit nécessite donc un développement pour génèrer ce nouveau fichier XML. Ce n'est donc pas une opération toute simple, contrairement à ce qu'il peut paraître.
--
Thomas - Chargé de support et d'assistance

Christophe Hamonic
Bonjour,

Peut-on utiliser cette galerie sur les images principales des produits et placer cette galerie non pas dans le fichier product.html mais un article préformaté par exemple.

Merci

Thomas Hesse
Bonjour,

A priori, oui, c'est tout à fait possible. Le point névralgique est comme je le disais plus haut le fichier XML dont l'animation se nourrit. Il faut récupérer l'URL et la mettre en dur si on veut s'en servir sur une autre page.

Il s'agit de l'adresse qui est entrée dans la variable "xmlfeed" dans le bloc "tplScript". En fait, tout ce qui est géré par des Mx doit être remplacé par leurs versions statiques.
--
Thomas - Chargé de support et d'assistance

Sébastien Roche / iNCiTE Web
J'ai implémenté cette galerie, mais j'ai un problème avec les formats des images, elles sont écrasées, la largeur n'est pas recalculée ?
http://www.sosignature.com/spa/4-spa-4-places.html

D'ailleurs à ce propos, peut-on limiter les dimensions et donc redimensionner automatiquement des médias chargés par des utilisateurs ?

Merci
--
Sébastien
iNCiTE Web
http://www.inciteweb.com