LE PLUGIN SPIP - Cycle2
logo imprimer

Diaporama paramétrable
http://contrib.spip.net/Cycle2

quelques explications non exhaustives

 
 

  • Pour faire un simple diapo avec toutes les images.
  • <articleXX|cycle>

- ou

  • <sjcycleXX|ALIGN>
  • Vous pouvez aussi paramétrer toutes vos photos en 400x400
  • définir les dimensions avec :
  • |hauteurmax=400|largeurmax=500
  • j’ai mis 500 pour avoir un peu d’espace autour des photos
  • Mettre des flèches à droite et à gauche des images pour
  • pouvoir faire défiler manuellement avec :
  • |next=.cycle-next|prev=.cycle-prev
  • Si vous voulez n’utiliser que les flèches pour faire défiler les photos
    vous stoppez le démarrage du diapo avec :
  • |paused=true
  • Si vous préférez des boutons cliquables au dessus de l’image avec :
  • |pager=.cycle-pager
  • Choisir les photos du diapos si il y en a plusieurs dans l’article avec :
  • |docs=703,704,705,706,707,708,709
  • choisir sa couleur de fond avec :
  • |backgroundcolor=#4CA66B
  • choisir l’effet de transition avec :|fx=votre choix
  • pour ce premier diaporama : |fx=tileBlind
  • plusieurs possibilités pour les effets :

fondu (fade)
fondu simultané (fadeout)
glissement horizontal (scrollHorz)
glissement vertical (scrollVert)
retournement horizontal (flipHorz)
retournement vertical (flipVert)
Remplacement- paquet de carte (shuffle)
glissement par bande en largeur (tileBlind)
glissement par bandes en longueur (tileSlide)
Carousel (carousel)
Aucun (none)

  • Choisir le temps d’exposition de l’image avec :
  • |timeout=1000
  • Le temps d’affichage pour chaque image se compte en millisecondes, 1000 étant -* très court, 4000 préconisé est plus pratique, faites vos essais.
  • Je n’ai pas mis le temps de transition entre chaque image qui peut se faire avec : |speed=1000>
    ni de temps d’attente avant le départ du diaporama qui se fait avec |delay=200>


-* Ce qui nous donne ce code pour le premier diaporama.
  • Pour le deuxième diaporama , on change les dimensions, l’image est plus petite, il n’y a plus les flèches
    on change aussi le fond d’écran et l’effet de transition, le temps d’exposition est plus court.
  • |overlay=.cycle-overlay ouvre un bandeau sous l’image où se mettront les titres des images :
  • Là ça se passe dans le portfolio, modifier, titre de l’image, vous pouvez la centrer :
  • <center>KIKIL'AMOUREUX</center>
    -* Mettez un titre à chaque image si vous le désirez
  • Ce qui nous donne pour le deuxième diaporama
  • Il faut que le survol de la souris soit activé pour afficher un texte

configurer le plugin avec :

  • Activez passage au survol
  • mettez un message
  • j’ai mis le message "IMAGES TUTOS CYCLE2 "
  • Dans votre diaporama où vous ne voulez pas de message.
  • le paramètre est |pauseonhover=false
  • L’option |tooltip_carac=oui vous affichera les caractéristiques que vous avez mis dans les paramètres de vos images ici :
  • le message mis dans la configuration du plugin apparaît au passage de la souris.
  • Vous pouvez changer le message dans votre code : avec :
  • pauseonhover=true|pauseonhovercontent=ratatouille vous salue
  • Votre message sera « ratatouille vous salue » qui remplace celui du paramètre plugin
  • Pour avoir un message ou un nom d’image ou un décompte en bas à droite avec :
  • |caption=.cycle-caption affichera le nombre de diapo ainsi que le numéro de l’image qui défile
  • |caption=.cycle-caption|captiontemplate=" DIAPO DE TUX"
  • Vous affichera la même légende « DIAPO DE TUX » sur toutes les images du diapo, probablement illisible sauf dans la partie qui est dans la marge en couleur, j’ai donc changé la hauteur par  :|hauteurmax=500
  • L’autre solution est de changer la couleur de la police dans les css.
  • |captiontemplate="Tous vos tux slideNum sur slideCount"
  • vous affichera « tous vos tux 1sur9, 2 sur 9 etc...juqu’audernier.
  •  
  • Maintenant une légende pour chaque image

captiontemplate=image slideNum : cycleTitle

  • vous affichera les titres que vous avez choisis dans les paramètres de l’image .
     
     
  • 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
    .


.

DEUXIÈME DIAPORAMA
-* Ce qui nous donne ce code pour le deuxième diapo

.

.


ceci est un aperçu des possibilités, ce plugin est plein de paramètres


 
 




Site réalisé sous SPIP
avec le squelette ESCAL-V3
Version : 3.87.51
Hébergeur : chezlagrenouille.fr