yoja-web - carousel - une liste d'images dynamique pour vos boutiques

Carousel : liste d'images qui défilent

Présentation générale
Le gadget carousel va vous permettre d'afficher une liste d'images qui défilera dynamiquement. Notre carousel par défaut s'intégre facilement sur tous types de boutiques (voir menu intégration) mais si vous êtes à l'aise avec les langages de programmation internet (CSS, HTML,...) n'hésitez pas à customiser et/ou modifier les paramètres de votre carousel.
Carousel par défaut
Par défaut, notre module carousel ajoutera sur votre boutique une liste d'images que le visiteur pourra faire défiler à l'aide de la souris. Les images affichées dans le carousel sont les images des produits présents sur la page. Si vous ajoutez de nouveaux produits, le carousel affichera automatiquement les nouvelles images.
voir une démonstration

Crédits
Notre module carousel est basé sur le plugin JQuery jMyCarousel.
Comment intégrer en 2 mn le carousel sur votre boutique ?
Cliquez gauche sur les lignes de code suivantes, puis faites Ctrl+A pour sélectionner tout le code. Ensuite faites Ctrl+C pour copier le code. Connectez vous à votre interface d'administration, sélectionnez l'onglet "aspect" puis "En-tête & Pied de page (HTML)". Cliquez gauche sur la zone pied de page HTML pour faire apparaître le curseur. Finalement faites Ctrl+V pour coller les lignes de code. N'oubliez pas de "Sauver" vos modifications. Il ne reste plus qu'à aller sur votre boutique pour constater le resultat !!

Script pour Boutique V3.5 :

<link rel="stylesheet" type="text/css" href="http://yoja-web.com/commons/css/plugins/jMyCarousel/jMyCarousel.css"> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/ui.magnifier.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/plugins/jMyCarousel/jMyCarousel.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/plugins/reflection/reflection.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/plugins/reflection/ui.reflection.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/yoja/yoja.core.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/modules/carousel/v3.5/carousel.module.js"></script>

Script pour Boutique V3.0 :

<link rel="stylesheet" type="text/css" href="http://yoja-web.com/commons/css/plugins/jMyCarousel/jMyCarousel.css"> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/jquery/jquery-1.2.1.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/ui.magnifier.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/plugins/jMyCarousel/jMyCarousel.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/plugins/reflection/reflection.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/plugins/reflection/ui.reflection.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/yoja/yoja.core.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/modules/carousel/carousel.module.js"></script>
Remarque : certaines lignes de code sont communes aux différents modules javascript yoja. Si vous avez déjà intégré un module yoja sur votre boutique, vérifiez de ne pas insérer deux fois les mêmes lignes (par exemple jquery-1.2.1.js et yoja.core.js)

Besoin d'aide ?
Si vous rencontrez des problèmes pour intégrer le gadget carousel sur votre boutique, vous pouvez trouver de l'aide sur le forum.
Vous pouvez également contacter notre support technique.
Comment customiser le carousel par défaut ?
Une fois votre carousel correctement inséré dans votre page vous pouvez évidemment le customiser pour qu'il corresponde au mieux au design de votre boutique. Pour cela, connectez-vous à votre interface d'administation, sélectionnez l'onglet "aspect" puis "Style CSS". Ajoutez à vos styles le code exemple suivant que vous adapterez en fonction de vos besoins :

div.jMyCarousel{ border:2px solid #000; margin:20px 45px 5px 0px; margin-left:46px; width:460px; padding:25px; background: #333; display:block; }

Comment aller plus loin dans la customisation ?
Pour ceux vraiment à l'aise avec le language CSS, voici le style complet du carousel par défaut. Vous pouvez supprimer l'import du CSS par défaut jMyCarousel.css et créez vos propres styles.

/*Bouton previous*/ div.jMyCarousel .prev{ background: url('images/left.png') center center no-repeat; width:47px; height:61px; border:0px; } /*Bouton next*/ div.jMyCarousel .next{ background: url('images/right.png') center center no-repeat; width:40px; height:61px; border:0px; } /*Bouton up, cas d'un carousel vertical*/ div.jMyCarousel .up{ background: url('images/up.png') center center no-repeat; width:61px; height:40px; border:0px; } /*Bouton down, cas d'un carousel vertical*/ div.jMyCarousel .down{ background: url('images/down.png') center center no-repeat; width:47px; height:61px; border:0px; } div.reflection ul li{ margin:0px; line-height:0px; padding-bottom: 50px; } div.jMyCarousel ul li{ margin:0px; line-height:0px; padding-bottom: 50px; } div.jMyCarousel ul li a{ /* in case of link */ display:block; } div.jMyCarousel ul li img{ display:block; height : 85px; width : 85px; border:0px; } div.jMyCarousel ul li img:hover{ cursor:pointer; }

Si vous avez des problèmes pour customiser votre carousel, vous pouvez trouver de l'aide sur le forum.
Vous pouvez également contacter notre support technique.

Comment modifier les paramètres du carousel par défaut ?

Le carousel par défaut est paramétrable. Vous pouvez par exemple choisir si le défilement des images est automatique ou activé par l'utilisateur. Pour modifier le paramétrage du carousel par défaut, il suffit d'ajouter le code suivant juste après les lignes de code présentées dans la partie "Intégration" :

<script type="text/javascript" language="Javascript">
carouselParameters["yojaCarousel"]={speed:1000, auto:true, visible:5};
</script>

Liste des paramètres disponibles

Voici la liste des tous les paramètres disponibles :

btnPrev	le bouton précédent. peut-être réglé en dehors du carousel en donnant sa référence jQuery, $j('#layerId') par exemple.
btnNext	le bouton suite. se configure comme mentionné ci-dessus.
mouseWheel	activation ou non de la molette de la souris. true ou false.
auto	précise si le carousel doit défiler automatiquement sans intervention manuelle (notez que dans ce cas, les flèches de déplacement n'apparaissent pas). true ou false.
speed	la vitesse de l'animation. valeur en ms.
easing	effet d'animation personnalisé, 'linear' par défaut. Ce paramètre est relatif à jQuery.
vertical	précise si le carousel est affiché horizontalement ou verticalement. true ou false.
circular	précise si l'animation défile de manière circulaire, sans buter à la dernière image. true ou false.
visible	taille du carousel. valeur en pixels, pourcents, ou nombre d'images
start	à quelle position en pixels démarrera le carousel. valeur en pixels.
step	taille du pas de chaque animation. valeur en pixels.
eltByElt	précise si le carousel doit défiler image par image, ou de manière linéaire. true ou false.
evtStart	personnalisation de l'événement de début de défilement : start event. 'mouseover', 'click', etc..
evtStop	personnalisation de l'événement de fin : stop event. 'mouseout', 'mouseup', etc...

Comment supprimer le carousel par défaut ?

Il suffit d'ajouter le code suivant juste après les lignes de code présentée dans la partie "Intégration" :

carouselParameters["defaultCarousel"]=false;

Comment créer un carousel avec vos propres images ?
Pour cela, il suffit d'ajouter la class "myImages" à votre carousel. Voici un exemple de code HTML :

<div class="yojaCarousel myImages"><ul><li><img src="img1.gif" /></li><li><img src="img2.gif" /></li><li><img src="img3.gif" /></li></ul></div>

Vous pouvez également ajouter des liens sur vos images, exemple :

<li><a href="mon_lien.html"><img src="mon_image..gif" /></a></li>
Pour les plus à l'aise avec le code HTML et les CSS, n'hésitez pas tester du code plus complexe entre les balises <li>.
Comment créer plusieurs carousels ?
C'est très simple, il suffit d'ajouter autant de fois que vous le souhaitez le code suivant :

<div class="yojaCarousel"></div>

Ensuite vous pouvez customiser et paramétrer indépendamment chaque carousel (voir les menu "Customisation" et "Paramétrage"):

Exemple : Carousel à customiser et paramétrer : <div id="mycarousel1" class="yojaCarousel"></div>
A noter l'utilisation de l'attibut "id" qui représente l'identifiant unique de votre carousel (et plus généralement d'un élement HTML) dans la page. Cet identifiant vous permet de personnaliser chaque carousel : - au niveau des CSS : div#mycarousel1{ border:2px solid #000; margin:20px 45px 5px 0px; margin-left:46px; width:460px; padding:25px; background: #333; display:block; }
-au niveau du paramétrage du carousel : carouselParameters["mycarousel1"]={speed:1000, auto:true, visible:5};

Exemple : Carousel identique à celui par defaut (avec le reflet des images): <div id="mycarousel2" class="yojaCarousel jMyCarousel reflection"></div>

Exemple : Carousel identique à celui par defaut (sans le reflet des images): <div id="mycarousel3" class="yojaCarousel jMyCarousel"></div>

Exemple : Carousel avec vos propres images : <div id="mycarousel4" class="yojaCarousel myImages"></div>

A vous maintenant de vous amusez avec toutes les combinaisons possibles :)

Présentation
Intégration
Customisation
Paramétrage
Gérer vos images
Multi carousels

Présentation générale

Carousel par défaut

Crédits

Comment intégrer en 2 mn le carousel sur votre boutique ?

Besoin d'aide ?

Comment customiser le carousel par défaut ?

Comment aller plus loin dans la customisation ?

Comment modifier les paramètres du carousel par défaut ?

Liste des paramètres disponibles

Comment supprimer le carousel par défaut ?

Comment créer un carousel avec vos propres images ?

Comment créer plusieurs carousels ?