FAT78 - Artisan numérique
 

> Lab > Diaporama "sjcycle"

mercredi 27 janvier 2016

Diaporama "sjcycle"

Mon diaporama préféré "sjcycle" n’est pas "responsive" ?

Après un bon bricolage dans le code html du plugin (en remplaçant toutes les valeurs de hauteur et largeur en pixels par des valeurs en %)

... le voici devenu "responsive" !

NorthCapeWebcam - 15/12/2023 - Aurore Boréale

Avec quelques contraintes :
- dans les réglages du plugin il faut mettre 100% comme valeurs par défaut des largeurs et hauteurs (et il s’affiche donc à 100% comme ci-dessus)
- si dans un article on veut redimensionner le diaporama, il faut le faire uniquement avec des valeurs en % comme ci-dessous
(<sjcycle15|width=50%|height=50%>)
ce qui donne un affichage réduit de moitié

Ça fonctionne : après redimensionnement de la fenêtre du navigateur, il faut recharger la page pour obtenir le redimensionnement du diaporama (et parfois il faut la recharger deux ou trois fois avant que les images s’affichent).

Pour obtenir ce simple, mais efficace diaporama, il suffit d’insérer, dans le texte de l’article, la balise <sjcycleNNN> où NNN correspond au numéro de l’article contenant les images. On peut ainsi insérer dans un article X, un diaporama avec les images d’un article Y. Le diaporama inséré fait défiler en boucle toutes les images de l’article NNN. Pour afficher en plein écran les images du diaporama en y cliquant dessus, il faut installer un plugin (mediabox ou fancybox) et activer l’action dans les réglages du plugin "JQuery Cycle". Ce qui est particulièrement intéressant, est la possibilité d’insérer plusieurs diaporamas "JQuery Cycle" dans un même article. Chaque diaporama peut aussi être personnalisé en ajoutant un ou plusieurs paramètres optionnels à la balise <sjcycleNNN>. Tous les paramètres sont optionnels : s’ils ne sont pas spécifiés dans la balise, ils prendront la valeur enregistrée dans les réglages du plugin "JQuery Cycle".

J’ai un peu modifié le fonctionnement de cette balise afin de disposer de plus de réglages. Voici les détails :
- Ordre de défilement des images : ordre alphanumérique du titre de chaque image (à défaut c’est la date de téléchargement du fichier qui est prise en compte - la date est modifiable en admin de l’article). Pour obtenir un défilement aléatoire, ajouter le paramètre "random=true"
- Paramètre "docs=n1,n2,[...],nx" : <sjcycleNNN|docs=n1,n2.>
— Permet de spécifier la liste d’images à afficher dans le diaporama, nx étant le numéro "spip" du document. S’il n’est pas précisé, toutes les images de l’article NNN sont sélectionnées par défaut. Exemple : pour fabriquer un diaporama des images n°11,22,15,17,19 de l’article 20, il suffit d’insérer la balise <sjcycle20|docs=11,22,15,17,19>
- Paramètre "legende", optionnel : <sjcycleNNN|legende=X>
— Permet d’afficher une légende sous le diaporama : — si X=1, on affiche comme légende le titre des images ; — si X=2, on affiche comme légende le descriptif des images ; — si X=3, on affiche comme légende le titre + le descriptif des images ; — si X=un texte, ce texte est affiché comme légende.
- Paramètre des bulles d’information des images (titre+descriptif) au survol du diaporama : <sjcycleNNN|bulle=off>
— Valeur par défaut conseillée : affichage infobulle=oui (sinon le paramètre optionnel bulle=off n’aura aucun effet)
- Paramètres "btn_precedent" et "btn_suivant" : <sjcycleNNN|btn_precedent=1|btn_suivant=1>
— Permet d’afficher les boutons "précédent" et "suivant" (dans ce cas, il est préférable d’imposer un temps "timeout" assez long). Le libellé des boutons est personnalisable dans la configuration du plugin.
- Paramètres "lien_article" : <sjcycleNNN|lien_article=XXX>
— Permet de poser un lien sur le diaporama vers un article n°XXX. Attention, cette action est incompatible avec les plugins mediabox ou fancybox permettant d’afficher les images en plein écran.
- Paramètres de redimensionnement (en % pour conserver la responsivité, mais on peut aussi forcer des dimensions fixes en pixels) des images : <sjcycleNNN|width=xxx|height =yyy>
— Valeurs par défaut conseillées : 100%
- Paramètres de défilement des images : <sjcycleNNN|timeout=tttt|speed=ssss> — timeout=tttt ; durée de tttt millisecondes d’affichage de chaque image — speed=ssss ; durée de ssss millisecondes de la transition entre les images
— Valeurs par défaut conseillées : temps d’affichage (timeout) = 4000 / vitesse de transition (speed) = 1000
- Paramètre de pause du défilement des images au survol du diaporama : <sjcycleNNN|pause=on>
— Valeur par défaut conseillée : pause au survol=non (sinon le paramètre optionnel pause=on n’aura aucun effet)
- Paramètre de défilement aléatoire des images du diaporama : <sjcycleNNN|random=on>
— Valeur par défaut conseillée : défilement aléatoire=non (sinon le paramètre optionnel random=on n’aura aucun effet)
- Paramètre de choix du type de transition, optionnel : <sjcycleNNN|opt=fx:'nom'>
— Valeur par défaut conseillée : ’fade’ (fondu)

Les options utilisables sont les suivantes :
- fx :’nom’ = type de transition, à choisir dans une longue liste d’effets :

  • blindX/Y/Z (l’image disparait en glissant -en X, Y ou Z- et l’image suivante apparait en glissant)
  • cover (chaque image entre de droite à gauche sur fond blanc)
  • curtainX/Y (l’image se contracte vers le centre -enX ou en Y- et l’image suivante apparait pendant l’expansion)
  • fade (fondu enchainé)
  • fadeZoom (l’image disparait en fondu au blanc et l’image suivante apparait en zoom depuis le centre)
  • growX/Y (l’image suivante recouvre l’image précédente -en X ou en Y- depuis le centre)
  • scrollUp/Down/Left/Right (glissement vers le haut/bas/gauche/droite des deux images insemble)
  • shuffle (comme un jeu de carte, l’image glisse à gauche en découvrant l’image suivante et se replace en-dessous. Bluffant !)
  • slideX/Y (l’image disparait en glissant -en X ou en Y- pendant que la suivante apparait en glissant en sens opposé)
  • toss (l’image s’envole vers la droite et découvre l’image suivante. Bluffant !)
  • uncover (l’image glisse vers la gauche en découvrant l’image suivante)
  • wipe (l’image suivante apparait en recouvrement depuis le coin supérieur gauche)


- Enfin, le diaporama "sjcycle" accepte les fichiers des images aux formats jpg, png et gif (y compris les gifs animés)


SPIP | | Plan du site | Suivre la vie du site RSS 2.0