Stéphane POUPARD

06.79.64.42.12

On me dit éclectique, toutefois j’ai une prédilection certaine envers ...

Sjcycle
logo imprimer

En annonce sur la page d’accueil :

  • Un diaporama vite-fait - bien fait en trois clics !
    les clics, varient selon le nombre d’images à y mettre

Un plugin très simple : on incorpore dans l’article un raccourci du modèle

<sjcycleN|ALIGN|docs=n1,n2>
(où N est le numéro de l’article avec les images en portfolio).


Le diaporama se crée automatiquement avec les réglages choisis par défaut, dont on peut modifier les options article par article si on le désire (largeur, hauteur, vitesse, défilement, etc ...).

Il suffit ensuite d’ajouter à l’article, les mots-clés "annonce", "pas au menu", "pas à la une", etc selon les besoins ...

Et dans la gestion d’Escal, deux clics pour positionner l’annonce là où l’on veut, au-dessus ou sous la une ... C’est super pour afficher l’actualité avec des images, qu’elles soient images photos ou composées ... en trois clics.


Exemple :

Un diaporama avec JSCYCLE c’est très simple .....

Un exemple en page accueil ici http://www.lettonie-francija.fr ,

l’article y est placé avec le mot-clé "annonce" et l’annonce est placée sous les "articles en une"

Dans l’écriture de l’article , il y a les textes ... et ensuite les "documents - images" que l’on y attache (dans le portfolio ou pas).

Quand on a validé l’usage du plugin SJCYCLE pour Spip, un cadre diaporama apparaît en haut à gauche de l’écriture de l’article.

Dès qu’il y a des images, dimensionnées, et déposées dans l’article, il suffit alors de copier coller le raccourci proposé par "diaporama SJCYCLE"
soit pour cet exemple <sjcycle875|center>
L’article exemple est ici : http://www.lettonie-francija.fr/Folklorissimo-Manneken-Pis-letton-bruxelles-875

Le modèle diaporama, peut se configurer comme tous les autres documents spip
soit par défaut dans ses réglages de plugin
soit individuellement par diaporama, avec les réglages et précisions
pour Plugin Spip jQuery Cycle (pour Spip 2.1 et 3) que l’on trouve ici : http://contrib.spip.net/Plugin-Spip-jQuery-Cycle-pour-Spip-2-1-et-3
et pour Cycle2 ici http://contrib.spip.net/Cycle2

Les différences entre les deux versions :
Le principal avantage de cette nouvelle version Cycle2 : l’affichage est adapté aux différentes largeurs d’écrans (responsive design) selon l’interface du site.

Pour la compatibilité avec le plugin « jQuery Cycle » le modèle 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.
Ce qui veut dire qu’avec la version Cycle2, on ne pourra pas afficher dans l’articleYY le diaporama des images de l’article XX. C’est quelquefois pratique.
A voir selon vos usages et l’importance de gestion des images ...

On peut aussi réduire le diaporama à la taille d’un timbre poste ...
Et de ce fait, imaginons une page article avec présentation de plusieurs diaporamas côte à côte ( Js cycle pour Spip 2.1 et 3) issus des différentes photos de différents articles ...
etc, etc ...

Et l’on peut y ajouter un paramètre "lien_article" et "forcer_lien_reference", optionnels :

<sjcycleNNN|left|lien_article=XXX|forcer_lien_reference=on>

Cela permet de poser un lien sur le diaporama vers un article autre que celui contenant les images.
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.


> je viens de tester ce dimanche le plugin sjcycle (Spip jQuery Cycle)
> pas mal, on ne peut pas comme avec galleria , faire défiler manuellement les images avec la flèche, le diaporama est automatique, on peut régler le temps d’exposition de l’image, ainsi que la grandeur .
>
►FAUX, source : http://contrib.spip.net/Cycle2
on peut tout régler les délais,les flèches etc ...

►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=" 
slideNum / slideCount
date - title
desc"
Choisir une couleur de fond, une valeur de couleur hexadécimale avec le « # », ex « #C5E41C ». La valeur « transparent » rétablit la transparence. :
|backgroundcolor=#b5b5b5
en installant le plugin Palette vous pourrez piquer la couleur sur une palette

> Par contre on peut avoir un article avec plusieurs thèmes et mettre un diaporama pour chaque thème en choisissant ses images pour chaque.


Forum
Répondre à cet article
Réalisé sous SPIP
Habillage ESCAL 4.0.98