(image N.A.S.A - Hubble)
(image N.A.S.A - Hubble)
(image N.A.S.A - Hubble)
(image N.A.S.A - Hubble)
(image N.A.S.A - Hubble)
(image N.A.S.A - Hubble)
(image N.A.S.A - Hubble)
(image N.A.S.A - Hubble)
(image N.A.S.A - Hubble)
(image E.S.O. - VLT Chile)
(image E.S.O. - VLT Chile)
(image E.S.O. - VLT Chile)
(image E.S.O. - VLT Chile)
(image E.S.O. - VLT Chile)
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 : par défaut, la taille des images affichées, la durée d’affichage et l’effet de transition sont ceux définis dans les réglages du plugin "JQuery Cycle".
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 le titre du fichier qui est pris en compte).
Paramètre "align" : <sjcycleNNN|align=...>
- Permet de spécifier l’alignement du diaporama au sein du texte. Les options de l’alignement sont : left, center, right en horizontal et top, center, bottom en vertical (toutes les combonaisons sont possible, ex : "left bottom").
- Valeur par défaut conseillée : "center"
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 le réglage permettant d’afficher les images en plein écran.
Paramètres de redimensionnement (en pixels) des images : <sjcycleNNN|width=xxx|height =yyy>
- Valeurs par défaut conseillées : 640x480
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 :
- 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)
M16
M31
M51
M64
NGC247
NGC6729
|
Diaporama manuel : utiliser les boutons ci-dessous
précédent
/
suivant
|