Le principal avantage de cette nouvelle version : l’affichage est adapté aux différentes largeurs d’écrans (responsive design) selon l’interface du site.
Il est nécessaire d’utiliser un squelette qui respecte la norme HTML5.
Pour une utilisation courante, le diaporama (slider pour les anglophones) s’insère dans les textes par le modèle <articleN|cycle> où « N » est le numéro de l’article dont on veut afficher les images.
Pour la compatibilité avec le plugin « jQuery Cycle » le modèle <sjcycleN> est tout à fait fonctionnel. La différence est que ce dernier n’affiche les images de l’article « N » que lorsqu’il est inclus dans l’article « N » lui-même.
Paramétrage général
Si un paramètre de la librairie a été implémenté, il l’a été fidèlement, pour rester dans une logique simple par rapport à Cycle2. On retrouve toute la documentation de référence ici : http://jquery.malsup.com/cycle2/api/.
Par exemple : data-cycle-random=true est un paramétrage du plugin d’origine qui fait tourner les images dans un ordre aléatoire. Ce paramètre est transposé dans le plugin SPIP, et on lui donne une valeur à l’insertion du modèle comme ceci : <articleN|cycle|random=true>.
Si le paramétrage général du plugin prévoit déjà l’ordre aléatoire, toutes les insertions de <articleN|cycle> joueront le diaporama dans un ordre aléatoire. Mais dans ce cas, il est aussi possible d’insérer un diaporama sans ce paramètre avec l’écriture <articleN|cycle|random=false>-
La page de configuration (dans l’administration de SPIP, une fois le plugin installé comme les autres, se rendre dans « Squelettes > Cycle2 », accès limité aux webmestres du site) offre un certains nombre d’options qui s’appliqueront à toutes les inclusions du modèle <articleN|cycle> :
- Largeur maximum (par défaut 640) : toutes les images seront retaillées en largeur à cette valeur, en pixels. Les diaporamas étant en taille proportionnelle, ils s’adapteront à la largeur définie par l’interface du site, mais dans la limite définie ici.
- |largeurmax=350
- Hauteur maximum : en laissant le champ vide, les images seront toujours à la largeur maximum possible. Sinon toutes les images seront retaillées en hauteur à cette valeur, en pixels. Si la largeur de l’image n’est pas suffisante, la couleur de fond configurée sera visible. La valeur de couleur de fond « transparent » rendra par contre un fond blanc.
- |hauteurmax=240
- Hauteur automatique : Choisissez ici la façon dont est déterminée la hauteur du diaporama. Par défaut (le champ vide), la hauteur de la première image sert de valeur, « calc » utilisera la hauteur de la plus haute image, et « container » ajustera la hauteur du diaporama à la hauteur de l’image courante. Il est possible de forcer le ratio hauteur/largeur avec une double valeur, par exemple « 600:400 ». La valeur « false » empêchera le script de gérer la hauteur automatiquement.
- |autoheight=600:400 ou |autoheight=container
- Temps d’affichage pour chaque image (en millisecondes) : choisir « 0 » pour faire un diaporama manuel (cf les boutons « précédent » et « suivant » pour activer le défilement manuel).
- |timeout=4000
- Temps de transition entre chaque image (en millisecondes)
- |speed=1000
- Temps d’attente : Temps d’attente avant le départ du diaporama (en millisecondes).
- |delay=6000
- Effet de transition : voir les exemples en ligne - fade - fadeout - scrollHorz - scrollVert - flipHorz - flipVert - shuffle - tileSlide - tileBlind - carousel - none
- exemple : |fx=scrollHorz
- pour |fx=tileSlide et |fx=tileBlind, option supplémentaire pour jouer l’animation verticalement
- pour |fx=carousel, options supplémentaires pour :
- choisir le nombre de diapositives affichées simultanément (carousel-visible) : |carouselvisible=3
- le décalage (en pixels) de la première diapositive (carousel-offset) : |carouseloffset=30
- définir la dimension des vignettes. Largeur (carousel horizontal) ou hauteur (carousel vertical) d’une diapositive (carousel-slide-dimension) : |carouselslidedimension=130
- jouer le déplacement verticalement (carousel-vertical) : |carouselvertical=true ou |carouselvertical=false
- adapter le carousel à la mise en page, seulement si horizontal (carousel-fluid) : |carouselfluid=true ou |carouselfluid=false
- À l’envers : Joue le diaporama à rebours :
- |reverse=true ou |reverse=false
- Synchronisation des animations, l’arrivée d’une image est simultanée avec le départ de la précédente :
- |sync=true ou |sync=false
- Pause au survol : |pauseonhover=true ou |pauseonhover=false
- Message lors de la pause au survol, laisser vide pour ne rien afficher :
- |pauseonhovercontent=en pause
- Ordre aléatoire :
- |random=true ou |random=false
- Bouton « suivant » : cibler un bloc html par sa classe ou son identifiant. Par défaut « .cycle-next » place une flèche à droite au survol de l’image. [1] :
- |next=.cycle-next
- Bouton « précédent » : cibler un bloc html par sa classe ou son identifiant. Par défaut « .cycle-prev » place une flèche à gauche au survol de l’image. [1] :
- |prev=.cycle-prev
- En boucle, à propos des boutons « précédent » et « suivant » : à la fin du diaporama, ne pas revenir au début, ou bien au début, ne pas suivre à la fin (n’empêche pas le diaporama automatique de tourner en continu) :
- |allowwrap=true ou |allowwrap=false
- Départ arrêté :
- |paused=true ou |paused=false
- Pagination : cibler un bloc html qui contiendra la pagination en nommant sa classe ou son identifiant css. Par défaut « .cycle-pager » place les boutons par-dessus l’image. [1] :
- |pager=.cycle-pager
- Afficher une légende pour chaque image [1]. Par défaut « .cycle-caption » :
- |caption=.cycle-caption. Il est possible de choisir le contenu de cette légende (cf la documentation) :
- Afficher le décompte/le total : par défaut
- Afficher le titre du document :
|captiontemplate="{{alt}}" - Sur-mesure :
|captiontemplate="images {{slideNum}} sur {{slideCount}}" - Sur-mesure :
|captiontemplate=image {{slideNum}} : {{cycleTitle}} {{cycleDesc}}
- Afficher une seconde légende en surimpression [1], un calque noir/transparent sur le bas de l’image pour afficher une légende avec Titre et Description de l’image :
- |overlay=.cycle-overlay
- Format de la légende en surimpression, par défaut le titre et la description de l’image, vous pouvez personnaliser le contenu suivant les exemples :
-
|overlaytemplate="<span class=left> <br>{{slideNum}} / {{slideCount}}</span>{{date}} - {{title}}<br>{{desc}}"
-
- Choisir une couleur de fond, une valeur de couleur hexadécimale avec le « # », ex « #C5E41C ». La valeur « transparent » rétabli la transparence. :
- |backgroundcolor=#b5b5b5
- en installant le plugin Palette vous pourrez piquer la couleur sur une palette.
Paramètres tooltip et mediabox
- Info au survol avec Tooltip : peut être surchargé lors de l’inclusion avec |tooltip=oui ou |tooltip=non
- Afficher les caractéristiques techniques de l’image : peut être surchargé lors de l’inclusion avec |tooltip_carac=oui ou |tooltip_carac=non
- Mediabox : ouvre l’image d’origine suivant vos paramétrages de la mediabox (dans l’administration : Squelettes > Boîte multimédia. Peut être surchargé lors de l’inclusion avec |mediabox=oui ou |mediabox=non
Inclure le modèle <articleN|cycle>
On l’a déjà vu plus haut, pour une utilisation courante, le diaporama s’insère dans les textes par le modèle <articleN|cycle> où « N » est le numéro de l’article dont on veut afficher les images. On peut insérer ce modèle dans n’importe quel autre article que l’article N lui-même.
Chaque paramètre de la configuration générale est actif et en même temps corrigeable lors de l’inclusion. (cf. plus haut pour chacun d’eux)
En dehors de ces paramètres généraux, voici quelques paramètres optionnels pour ce modèle :
Alignement dans le texte
Comme un autre document, on peut aligner le diaporama : |left, |right ou |center comme ceci <articleN|cycle|left>
S’il n’est pas précisé, l’alignement est « centré ». L’effet rendu dépendra de la valeur saisie pour le paramètre « Largeur maximum » et de l’interface du site. L’alignement flottant est intéressant si le diaporama est significativement moins large que le texte lui-même.
Choisir les images
<articleN|cycle|docs=1,5> fait tourner les images 1 et 5 de l’article « N » en diaporama, dans l’ordre du titre des images.
« N » n’est pas obligatoire. On peut maintenant écrire <article|cycle|docs=1,2,3,6,9> pour demander les images 1,2,3,6,9 même si elles sont liées à des articles différents, voir des rubriques ou d’autres objets.
Attention : dans le cas d’une utilisation dans un squelette, l’écriture diffère :
[(#MODELE{article_cycle,id_article=N,docs=21|22|24})]
ou
[(#MODELE{article_cycle,docs=21|22|24})]
Plusieurs diaporamas par page
On peut inclure plusieurs diaporamas par page de la même façon :
<articleX|cycle>
<articleY|cycle>
<articleZ|cycle>
Dans ce cas, si les boutons « suivant/précédent » sont activés dans la configuration générale, ils actionneront tous les diaporamas en même temps. Pour corriger cet effet, il est préférable de personnaliser chaque diaporama comme ceci :
<articleN|cycle|prev=.pre1|next=.suiv1>
<a href="#" class="pre1">précédent</a>
<a href="#" class="suiv1">suivant</a>
<articleN|cycle|prev=.pre2|next=.suiv2>
<a href="#" class="pre2">précédent</a>
<a href="#" class="suiv2">suivant</a>
<articleN|cycle|prev=.pre3|next=.suiv3>
<a href="#" class="pre3">précédent</a>
<a href="#" class="suiv3">suivant</a>Encore faut-il ensuite styler ces balises HTML aux couleurs de votre site...
Paramètre « lien_parent »
|lien_parent=oui
Crée un lien sur chaque image vers l’objet auquel elle est liée, que ce soit les images d’un seul article, ou bien sélectionnées individuellement |docs=1,2,3,6,9. Si une image est liée à plusieurs objets, ce sera le dernier en date qui sera utilisé.
Paramètres « lien_article » et « forcer_lien_reference »
<articleN|cycle|lien_article=XXX|forcer_lien_reference=oui>
Permet de poser un lien sur le diaporama vers un article, celui qui contient les images ou un autre. Dans le cas d’un site multilingue, fournir l’id de l’article de référence, le modèle se charge de trouver l’id de l’article correspondant à la langue du visiteur. Cette option désactive l’ouverture vers une box. Si l’article n’existe pas dans la langue courante on met ou pas un lien vers l’article de référence suivant que le paramètre forcer_lien_reference soit défini ou pas.
Exemple dans le cas d’une insertion dans un squelette sur une page sommaire :
- [(#MODELE{article_cycle,id_article=16,lien_article=171})] : diaporama sur toutes les images de l’article 16 avec un lien vers l’article 171 (ou sa traduction)
-
[(#MODELE{article_cycle,id_article=16,lien_article=171|forcer_lien_reference=oui})]: c’est pareil sauf que le lien ne se fera pas sur la traduction même si elle existe.
Paramètres « liens_individuels »<articleN|cycle|liens_individuels=article>
Permet de poser un lien sur chaque image du diaporama vers un article, une rubrique ou un site externe suivant la valeur du paramètre (article, rubrique, externe). Si la valeur vaut article ou rubrique, l’identifiant de l’objet est pris dans le champ descriptif de chaque image. Si la valeur vaut externe, le champ descriptif de chaque image doit contenir un lien http. Cette option désactive l’ouverture vers une box.
Exemple :
- <article16|cycle|center|liens_individuels=article> : diaporama sur toutes les images de l’article 16 avec sur chaque image un lien vers l’article dont l’identifiant est contenu dans le descriptif de l’image.
Paramètre « limite » :
<articleN|cycle|limite=3>
Sortira les trois premières images de l’article « N » dans le diaporama.
Diaporama des images d’une rubrique
Le modèle rubrique_cycle.html est fait pour ça.
<rubriqueN|cycle> où « N » est l’identifiant de la rubrique concernée.
Pour compatibilité, le modèle sjcycle_rubrique.html est conservé et permet d’inclure <sjcycle6|rubrique>
Diaporama des sites
Le modèle sjcycle_sites.html est conservé et transposé pour cette version du plugin.
Diaporama des albums
Le plugins Albums permet de regrouper des documents.
L’inclusion de <albumN|cycle> affiche un diaporama des images de l’album N.
Discussions par date d’activité
49 discussions
bonjour
ce plugin semble très bien mais petite frustration :)
L’installation s’est bien déroulée, les paramétrages sont ok, en privé le cycle fonctionne cependant en public il bloque sur une image.
Auriez vous une piste de réflexion, merci
Bonjour,
il se bloque sur une image et que sur l’espace public ? Étrange...
Et avec les squelettes-dist, ça donne quoi ?
bonsoir
merci de ton intérêt
oui étrange
je suis sous Z avec couteau suisse en gestion de la balise #INSERT_HEAD et je crois qu il y a un soucis avec ça, même mes ouvertures médias sont intempestives, mais je n arrive pas à comprendre pourquoi car tout est par défaut...
le diap est directement intégré dans l article, c est encore plus troublant.
squelettes-dist ?
squelettes-dist : je te propose d’essayer avec le squelette de SPIP par défaut, sans surcharge de squelette, enfin si c’était le cas... sinon il faudrait aussi essayer sans les autres plugins, puis les réactiver un à un pour trouver l’origine du soucis.
bonsoir
ta piste est bonne c est le Z qui mets tout en vrac...
n ayant pour l instant pas trop le temps, je me suis rabattu sur une alternative.
Dès que j aurai vraiment résolu, je t en ferai part.
Merci à toi.
Répondre à ce message
Bonsoir
J ’ai un petit soucis si j ’insère <articleN|cycle> dans un article rien ne se passe ,
si j ’ajoute la variable largeurmax le diaporama fonctionne.
exemple <articleN|cycle|largeurmax=450> ---> ok
Nota:dans la config par défaut |largeurmax=500.
est ce un « bug » ou une mauvaise configuration de ma part ?
Bruno
Bonsoir,
je ne vois pas, normalement la valeur par défaut de la page de configuration est prise en compte, sans avoir besoin de la préciser dans la rédaction... entre 500 et 450, la différence est voulue ? Avec 450 dans la configuration ça donne quoi ? C’est possible qu’il y aient des règles css qui gênent ?
Bonsoir Chankalan
c ’est bon ; j ’ ai réussi à le faire fonctionner.
J ’avais été obligé de mettre dans la config du plugin dans le champs largeur maximum : |largeurmax=450 (voir mon message du 9/11/14) pour faire fonctionner le diaporama des sites
j ’ ai remplacé |largeurmax=450 par 450 uniquement et maintenant le diaporama des articles fonctionne , mais le diaporama des sites ne fonctionne plus correctement (comme mon message du 9/11 ,taille des miniatures).
je vais étudier la question des règles css (mais je suis débutant) pour essayer de régler le problème du diaporama des sites
merci encore pour votre aide.
Bruno
bonsoir Omega,
je vois pas pourquoi le diaporama des sites marche pas...
<sjcycle_sites1>fonctionne chez moi, mais la doc est un peu succincte, je reconnais...Bonjour
j’ ai réussi a faire fonctionner correctement le diaporama des sites en forçant la hauteur et la largeur , aux valeurs de la config de Thumbsites
[(#MODELEsjcycle_siteslargeurmax=120hauteurmax=90)]
attention , manque dans la syntaxe ci dessus les crochets
merci encore pour votre aide
Bonne continuation
Bruno
Répondre à ce message
Bonjour à tous
j ’ essaye de basculer Spip jQuery Cycle vers Cycle2 et j ’ai un probleme sur le diaporama des sites , les miniatures des sites sont affichées en mini mini miniature impossible de les avoir en taille de miniature.
nota : l ’effet de transition fonctionne , seule la taille est incorrecte
Auriez vous une idée pour les rendre en taille normale ?
Merci d ’avance pour votre retour.
Bruno
Bonjour,
est-ce que la largeur est correctement définie dans la page de configuration ?
Si la valeur est correcte, il faudrait vérifier les règles css...
Bonsoir Chankalan
Merci à vous pour votre retour rapide , j ’ ai trouvé mon erreur (de débutant) j ’ avais renseigné uniquement la valeur numérique dans la configuration de Cylce , il fallait également mettre le nom de la variable |largeurmax=640 / |hauteurmax=480.
Merci de votre contribution du plugin Cycle2
Bonne soirée
Bruno
Répondre à ce message
bonjour
ayant fait plusieurs diaporamas dans un seul article, je ne veux pas mettre
pause au survol et Message au survol dans le paramétrage du plugin,
mais dans chaque paramètre de chaque diaporama dans l’article :
pour ne pas avoir le même message.
J’ai ceci qui fonctionne bien pour le premier diapo :
<article15|cycle|docs=213,214,215,216,217,218,220||hauteurmax=400|largeurmax= 500|next=.cycle-next|prev=.cycle-prev|backgroundcolor=#4CA66B|timeout=4000|fx=fadeout||pauseonhover=true>
mais impossible de trouver comment avoir un message au survol de la souris dans ce paramétrage. j’ai vraiment cherché longtemps, pour rien.
Si vous pouviez m’aider, merci
Bonjour,
vous n’étiez sûrement pas très loin pourtant...
Précision : pour ne rien afficher il faut la présence du paramètre mais sans valeur :
<article15|cycle|pauseonhover=true|pauseonhovercontent=>bon, il y a encore une coquille
1)en cochant Pause au survol et en mettant un message dans le parametrage du plugin.
pauseonhover=true|pauseonhovercontent=>, le message apparaît
2) en mettant dans le premier diapo : |pauseonhover=false et |pauseonhovercontent=>
pas de message
3) si je veux un autre message dans le 2éme diaporama :
|pauseonhover=true|pauseonhovercontent=ratatouille vous salut>
ça marche, c’est le nouveau message qui apparaît au passage de la souris
Mais si je mets un autre message dans le premier diaporama : exemple
|pauseonhover=true|pauseonhovercontent=le chat Albert vous donne le bonjour>
J’ai le premier message dans les deux diaporamas « ratatouille vous salut »
Si j’inverse les messages, c’est toujours celui du 2éme diaporama qui apparaît « le chat d’albert vous donne le bonjour »
et je voudrai pas le même dans les deux, mais bien chaque phrase dans chaque diapo .
Je continue donc, pas moyen et dailleurs toujours aussi bizare :
pour le 2éme diapo
parc contre
-
je nage un peu où y manque un truc dans la programmation du plugin ???
amicalement
En fait c’est pas trop prévu d’afficher un message différent pour informer que le diaporama est en pause, c’est une utilisation détournée. Le bug est pas là où on croit... ;o)
Pour afficher des informations au survol qui ont du sens par rapport au diaporama et aux images, il faut utiliser les solutions faites pour ça, il y en a même plusieurs :
...
bon, si j’ai bien compris, c’est l’interface entre la chaise et le clavier qui bug sec
OK, je vais potasser mieux et ça ira
Répondre à ce message
bon en effet il faut lire la doc en entier avant de pleurer !!!
pour le tooltip c’est tout marqué ^^
reste mon soucis de superposition mais là encore je vais ouvrir mes yeux
Répondre à ce message
Bonjour j’ai installé le plug-in sur mon site
j’ai 2 soucis :
1 le diaporama passe par dessus mon menu déroulant comme s’il avait une « position : absolute » dans le css
2 je n’ai plus le curseur avec les infos aux survols comme dans la version précédente
modifiable dans javascript/jquery.tooltip.css
comment faire pour le récupérer
d’avance merci
Bonjour,
pour le 1 : je sais pas comment est intégré le diaporama : dans un squelette ? dans le corps d’un texte ? Mais il est bien certain qu’il faut parfois ajuster les css...
pour le 2 : il faudrait savoir si c’est une installation neuve ou bien une mise à niveau du plugin ?
En tous les cas il faut peut-être juste repasser par la page de configuration et choisir les paramètres...
Répondre à ce message
Bonjour j’ai installé sur une version de spip 3
je n’ai pas accès à la configuration
« Fichier configurer_sjcycle introuvable »
incompatibilité avec CKeditor peut être ?
farbtastic_1_3_2 ok et palette 3 a jour
merci de votre aide
Bonjour,
est-ce que ce fichier est bien présent dans le dossier du plugin ? Le téléchargement a peut-être été interrompu.
Il devrait se trouver dans prive/squelettes/contenu/ exactement comme ici :
http://zone.spip.org/trac/spip-zone/browser/_plugins_/sjcycle/trunk/prive/squelettes/contenu/configurer_sjcycle.html
merci, il manqué le dossier contenu o.O
Répondre à ce message
Salut,
j’ai installé le plugin, mais il ya une incompatibilité avec Adaptive Images.
Cf http://thread.gmane.org/gmane.comp.web.spip.zone/36540
Cédric propose d’ajouter la classe no-adapt-img ici http://zone.spip.org/trac/spip-zone/browser/_plugins_/sjcycle/trunk/modeles/article_cycle.html?rev=84872#L173 pour résoudre le souci.
Qu’en dis tu ?
jean marie
salut,
pourquoi pas... c’est pas difficile.
J’ai une mise à jour à faire en même temps : ce sera dans la version 3.4.7
Super...
Merci pour ta réactivité !
jean marie
Répondre à ce message
bonsoir
je découvre cette version alors que je viens de commencer avec jQuery Cycle..
pourtant, quand je veux installer ce cyle2 pour voir, spip pense qu’il est déja installé
pourtant, j’utilise bien et pas <article|cycle..> ?
ca me créé un peu de confusion...
il y a bien deux plugins cycle disponible pour spip 3 ?
lequel est préconisé... ?
pam
Bonjour,
apparemment la version du plugin installée chez vous est la version 2. Mais une mise à jour n’est pas suffisante pour utiliser la version 3 : il faut se rendre dans l’administration des plugins et choisir la version 3 comme on choisi un nouveau plugin. En l’activant, la version 2 sera désactivée automatiquement.
Le nouveau plugin est la version 3 et utilise la nouvelle librairie Cycle2 : c’est parce que cette nouvelle version de la librairie existe qu’il a été nécessaire de faire une version 3 du plugin. À mon sens on peut la préférer si on réalise un site en HTML5. Si on reste dans une autre version de HTML, il faut garder la version 2.
Par contre, en ayant installer cette nouvelle version 3, on a à disposition le nouveau modèle
<articleN|cycle>mais aussi l’ancien modèle<sjcycleN>, donc les deux modèles sont disponible dans la version 3 pour garder une certaine compatibilité avec la version précédente.Voilà... bon SPIP !
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
