| Cycle : animations et effets |
-
Présentation générale
Le gadget cycle va vous permettre d'intégrer des animations et effets sympas sur vos boutiques zlio.
Les effets pourront s'appliquer sur des listes d'images mais également sur du texte.
Notre effet cycle 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 effet cycle.
Cycle par défaut
Par défaut, notre effet cycle s'applique sur l'image de chaque catégorie. Ainsi au lieu d'avoir une seule image de produit
pour présenter votre catégorie, vous aurez une rotation de plusieurs images avec un effet de transition de type fondu.
voir une démonstration
Crédits
Notre module cycle est basé sur le plugin JQuery Cycle.
-
Comment intégrer en 2 mn l'effet cycle sur votre boutique zlio?
Cliquez gauche sur les lignes de code suivantes, puis faites Ctrl+A pour sélectionner tous 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 !!
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)
Script pour Boutique V3.5 :
Script pour Boutique V3.0 :
Besoin d'aide ?
Si vous rencontrez des problèmes pour intégrer le gadget cycle sur votre boutique zlio, vous pouvez trouver de
l'aide sur le forum.
Vous pouvez également contacter notre support technique.
-
Comment créer votre propre cycle d'images?
Il suffit d'insérer sur votre page un code HTML de la forme
suivante que vous adapterez en fonction de vos besoins.
A noter l'utilisation de l'attibut "id" qui représente l'identifiant unique de votre menu dans la page.
Cet identifiant vous permettra de customiser et de paramétrer votre menu. (à voir rubrique "customisation" et "paramétrage").
Pour que votre cycle fonctionne correctement, il faut définir les propriétés height et width.
Comment créer votre propre cycle complexe (texte, texte et image,...) ?
Vous pouvez également créer un cycle avec du texte, du texte et des images
ou presque toutes autres choses qui pourraient sortir de votre imagination (et être contenues dans une balise <div>).
Pour cela il suffit d'insérer sur votre page un code HTML de la forme
suivante que vous adapterez en fonction de vos besoins.
Pour en savoir plus sur les possibilités offertes par cycle,
vous pouvez consulter le site jQuery Cycle Plugin (site en anglais).
-
Comment customiser vos propres cycles ?
Pour cela, connectez-vous à votre interface d'administation, sélectionnez l'onglet "aspect" puis "Style CSS".
Ajoutez à vos styles le code exemple suivant en remplaçant l'identifiant "myCycle" par l'identifiant de votre propre cycle :
-
Comment modifier les paramètres du cycle par défaut ?
Le cycle par défaut est paramétrable. Vous pouvez par exemple choisir
l'effet de transition, la période, la vitesse, etc...
Pour modifier le paramétrage du cycle 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" :
Comment modifier les paramètres votre propre cycle ?
Lors de la création de votre propre cycle, vous lui avez attibué un identifiant (ex:"myCycle").
Pour modifier le paramétrage de votre cycle, il suffit d'ajouter
le code suivant juste après les lignes de code présentée dans la partie "Intégration" :
Liste des paramètres disponibles
Voici la liste des paramètres les plus utiles :
| fx | Effet utilisé pour la transition. Valeur à choisir parmi ("fade", "shuffle", "zoom", "scrollLeft", "up", etc...). Valeur par défaut : "fade" |
| timeout | Délai en millisecondes entre chaque transition. La valeur 0 annule le défilement automatique. Valeur par défaut : 4000 |
| continuous | Vaut 1 si l'on souhaite que les transitions s'enchaînent immédiatement les unes à la suite des autres. Valeur par défaut : 0 |
| speed | Vitesse de la transition. Valeur par défaut : 1000 |
| next | Identifiant de l'élémént HTML qui permet afficher le slide suivant |
| prev | Identifiant de l'élémént HTML qui permet afficher le slide précédent |
| pager | Identifiant de l'élémént HTML qui va contenir les boutons de paginations |
| pagerEvent | Evènement qui va déclencher la pagination. Valeur par défaut 'click' |
| height | Taille du conteneur de votre cycle. Valeur par défaut 'auto' |
| random | Vaut 1 si l'on souhaite que les slides s'affichent de manière aléatoire. Valeur par défaut : 0. |
| Retourvez tous les paramètres disponibles sur jQuery Cycle Plugin - Option Reference |
Comment supprimer l'effet cycle 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" :
-
Comment ajouter des boutons de navigation pour votre cycle
Pour ajouter des boutons qui vont vous permettre de naviguer entre les
différentes pages de votre cycle il suffit de d'ajouter une <div> avec un identifiant :
Ensuite il faut utiliser le paramètre pager:'#myCycleNav' (voir la rubrique "Paramétrage").
Si vous avez des problèmes pour customiser votre cycle, vous pouvez trouver de
l'aide sur le forum.
Vous pouvez également contacter notre support technique.
|
