Plugin Spip jQuery Cycle (pour Spip 2.1 et 3)

Ce plugin est une adaptation pour spip du script Cycle pour jQuery. Il permet d’afficher des diaporamas dans le texte de vos articles. Il fournit également des modèles permettant par exemple d’insérer un diaporama aléatoire d’images ou un diaporama des sites syndiqués dans un squelette...

Cette deuxième mouture du plugin Spip jQuery Cycle " sjcycle " est compatible avec spip >= 2.1

Par défaut, la fonction tooltip est désactivée mais est activable via la page de configuration. De même pour les fonctions fancybox/mediabox mais qui nécessitent, eux, l’installation des plugins fancybox ou mediabox pour fonctionner. Spip jQuery Cycle utilise les librairies fournies par ces plugins mais pas leurs paramètres de configuration.

Nota : l’effet FancyBox n’est plus proposé en Spip 3, ce plugin n’étant pas compatible.

Pour plus d’informations, se reporter à la version précédente.

Installation

Comme tous les autres plugins, cf. http://www.spip.net/fr_article3396.html

  • Le plugin fonctionne sur les squelettes disposant de les balises #INSERT_HEAD et #INSERT_HEAD_CSS.
  • Le plugin nécessite les plugins CFG (avant la version 1.8), Saisies, YAML et Spip_Bonux. Il utilise le plugin Palette.

Décryptage de la syntaxe et paramètres du raccourci typographique "sjcycle"

Le raccourci typographique "sjcycle" permet d’insérer facilement un ou plusieurs diaporamas au sein d’un article : il vous suffit de le recopier à l’intérieur de la case « Texte » de l’article, là où vous désirez situer le diaporama.

Ce raccourci comporte plusieurs paramètres séparés par le caractère "|". Les 3 derniers paramètres ont été rajoutés dans la version 0.3

Paramètre "N", obligatoire :
<sjcycleN>
Correspond au numéro de l’article contenant les images. Vous pouvez ainsi insérer un diaporama avec les images d’un article X dans un article Y.

Paramètre "ALIGN", optionnel :
<sjcycleN|ALIGN>
Permet de spécifier l’alignement du diaporama au sein du texte.
S’il n’est pas précisé, l’alignement est "center".
Les options de l’alignement :
-  "left" : à gauche du texte ;
-  "center" : centrer dans le texte ;
-  "right" : à droite du texte.


Paramètre "docs=n1,n2,[...],nx", optionnel :
<sjcycleN|ALIGN|docs=n1,n2>
Permet de spécifier la liste d’images à afficher dans le diaporama, nx étant le numéro "spip" du document.
Ainsi, on peut afficher plusieurs diaporamas dans au sein d’un même texte, isoler des images.
S’il n’est pas précisé, l’ensemble des images sont sélectionnées par défaut.

Attention : dans le cas d’une utilisation avec un modèle l’écriture diffère :

[(#MODELE{sjcycle}{id_sjcycle=XX,docs=21|22|24})]

Paramètre "id_diapo", optionnel :
<sjcycleN|ALIGN|id_diapo=X>
Permet d’attribuer un id spécifique à un diaporama afin de pouvoir le cibler en css par dsjcycle_X
Depuis la version 1.1, n’est plus nécessaire pour afficher plusieurs diaporamas dans le même article

Exemple :
<sjcycle16|center|docs=101,102,103,104|id_diapo=1><sjcycle16|center|docs=105,106,107,108,109|id_diapo=2|opt=fx:'shuffle',timeout:2000>
Ceci affiche 2 diaporamas dans le même article, le premier sur 4 images avec les paramètres par défaut du site et le second sur 5 images, avec des paramètres différents de ceux par défaut.

Paramètre "legende", optionnel :
<sjcycleN|ALIGN|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=modele, on affiche comme légende le texte fourni par le modèle sjcycle_modele. Ceci permet de créer une légende contenant le nom de l’auteur, le titre de l’article, enfin ce qu’on veut...
  • Si X=un texte, ce texte est affiché comme légende

Paramètres "btn_precedent" et "btn_suivant" (version 2.2.5 et 1.9.1) :
<sjcycleN|btn_precedent=1|btn_suivant=1>
Permet d’afficher les boutons "précédent" et "suivant" : on peut ne mettre qu’un seul des deux boutons.
Le libellé des boutons est personnalisable dans la configuration du plugin.

Paramètres "lien_article" et "forcer_lien_reference", optionnels (ajoutés en version 1.6) :
<sjcycleN|ALIGN|lien_article=XXX|forcer_lien_reference=on>
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.

Exemple dans le cas d’une insertion dans un squelette sur une page sommaire :
-  [(#MODELE{sjcycle}{id_sjcycle=16,width=200,height=300,lien_article=171})] : diaporama sur toutes les images de l’article 16 redimensionnées à 200x300 avec un lien vers l’article 171 (ou sa traduction)

Paramètres "liens_individuels", optionnel (ajouté en version 1.7) :
<sjcycleN|ALIGN|liens_individuels=valeur>
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 :
-  <sjcycle16|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" :
<sjcycleN|limite=3>
Sortira les trois premières images de l’article "N" dans le diaporama.

Paramètre "opt=p1:v1 ;p2:v2 ;[...] ;px:vx", optionnel :
<sjcycleN|ALIGN|opt=p1:v1;p2:v2>
Permet d’utiliser les options du script jcycle. La liste complète est définie sur le site du plugin jquery jcycle par ici
Ces valeurs écrasent celles définies dans la page de configuration du plugin.
Les options possibles correspondent à celles de la version utilisée dans ce plugin spip et non à celles proposées sur la page citée ci-dessus. Actuellement, c’est la version 2.88 (08-JUN-2010) qui est utilisée
Depuis la version 1.2, il faut utiliser le point-virgule comme séparateur pour que ça fonctionne en modèle.

Exemple :
-  <sjcycle16|center|opt=autostop:1;autostopCount:5> : diaporama sur toutes les images de l’article 16 mais qui s’arrêtera à la cinquième image
-  <sjcycle16|center|opt=fx:'fade'> : diaporama sur toutes les images de l’article 16 avec un effet de transition "fade" qui remplace celui défini globalement pour le site entier

Paramètres de surcharge de la configuration générale :
<sjcycleN|ALIGN|param=valeur>
Ces paramètres optionnels écrasent localement les valeurs définies dans la page de configuration du plugin :
-  width : largeur en pixels des images recadrées
-  height : hauteur en pixels des images recadrées
-  position : position de l’image de d’origine dans l’image recadrée (left top, left center, left bottom, center top, center, center bottom, right top, right center, right bottom)
-  background : couleur de fond des images recadrées (au format #FF0000)
-  border_color : couleur de la bordure des images recadrées (au format #FF0000)
-  border_width : largeur en pixels de la bordure
-  div_margin : marge en pixels autour des images recadrées

Exemple :
-  <sjcycle16|center|background=#000000> : diaporama centré sur toutes les images de l’article 16 mais avec un fond noir, peu importe la couleur de fond définie dans la page de configuration du plugin.

Le modèle

On peux utiliser le modèle pour afficher un diapo dans les squelettes, XX étant le numéro de l’article contenant les images :

[(#MODELE{sjcycle}{id_sjcycle=XX,width=200,height=300})]

Astuces :


-  pour avoir de la transparence en fond, il faut mettre "transparent" dans les 2 champs de couleur dans la page de config. Cependant il faut savoir que les images générées seront au format png et donc généralement plus lourdes que les jpg
-  La qualité jpeg par défaut utilisée par les filtres d’image de SPIP est de 85. Elle peut être modifiée en rajoutant dans le fichier mes_options la ligne suivante :
define('_IMG_GD_QUALITE', 95);

Exemples d’utilisation :

http://www.lefourneau.com/spip/spip...

Diapo « au hasard » (ajouté en version 0.8)

Le modèle sjcycle_alea permet d’afficher un diaporama paramétrable sur un ensemble d’images choisies au hasard parmi les documents du site. Les paramètres possibles sont :
-  nb : nombre d’images (10 par défaut)
-  fx : l’effet à appliquer (fade par défaut)
-  duree : durée d’affichage de chaque image en ms (5000 par défaut)
-  largeur : largeur des images (200 par défaut)
-  hauteur : hauteur des images (0 par défaut, donc fonction de la largeur)

Exemple d’appel :

[(#MODELE{sjcycle_alea}{largeur=190})]

Une noisette pour le Noizetier est également fournie

Diapo des sites (ajouté en version 1.5)

Le modèle sjcycle_sites permet d’afficher un diaporama paramétrable sur l’ensemble des logos des sites référencés. Les paramètres possibles sont :
-  afficher_nom_site : si défini, affiche le nom du site sous le logo
-  fx : l’effet à appliquer (fade par défaut)
-  duree : durée d’affichage de chaque image en ms (5000 par défaut)
-  largeur : largeur des images (200 par défaut)
-  hauteur : hauteur des images (0 par défaut, donc fonction de la largeur)

Exemple d’appel :

[(#MODELE{sjcycle_sites}{afficher_nom_site=on})]

Une noisette pour le Noizetier est également fournie

Diapo des images d’une rubrique (ajouté en version 2.3.0)

Depuis la version 2.3.0 il est possible d’afficher les images d’une rubrique avec le raccourci suivant : <sjcycleXX|rubrique>. Les paramètres disponibles sont les mêmes que pour le modèle "article".

Problèmes connus :


-  Les effets de type turnLeft, scrollRight,... ne fonctionnent pas si les infobulles sont activées dans la config.
-  L’affichage d’une bordure autour des images n’est pas satisfaisant...

Dernière modification de cette page le 13 février 2019

Discussion

93 discussions

  • 15

    Hello,

    Est-ce possible d’avoir sur la même page 2 diapos de tailles différentes et avec des effets différents ?

    J’ai rien trouvé qui explique si solution il y a ?
    Amitié

    • Salut
      Ce n’est pas possible actuellement. Le paramétrage se fait pour l’ensemble du site

    • Hello,

      Je vais donc devoir jouer avec 2 plugins pour obtenir l’effet désiré :-p

      Merci

    • Bonjour,

      Je vais donc devoir jouer avec 2 plugins pour obtenir l’effet désiré :-p

      Comment, au juste ? En dupliquant le plugin en changeant le nom ? Ça fonctionne ?

    • Salut

      Je viens de faire une évolution du plugin. On peut désormais redéfinir les dimensions localement :
      <sjcycleN|ALIGN|width=XXX|height=YYY>

      Peux tu essayer chez toi ?

    • Salut,

      Je pense qu’il y a une petite erreur avec le mot « height » (ght ou gth)...

      -  Quand je mets « heigth=XXX », ainsi que tu l’indiques, ça marche dans l’interface privée, mais ça plante en ligne (enfin, je suis en local, mais c’est tout comme :-)
      -  Quand je mets « height », ça ne tient aucun compte de la hauteur, mais ça ne plante plus !

      Il faut peut-être coordonner toutes les occurences de « height »...

    • Salut

      J’ai toujours eu du mal avec ce mot ;-) Bon j’ai corrige la doc, il faut bien utiliser height

    • Salut,

      Tout d’abord, merci et bravo pour toutes ces nouvelles fonctions ! J’ai fait quelques tests (avec Safari 5 et Firefox 3.6.3). Voici un résumé...

      Avec 2 diaporamas dans un article :
      -  Le redimensionnement sur un des diaporamas fait planter (c’est même toute la rubrique qui refuse de s’afficher)
      -  En sélectionnant des photos diverses pour chaque diaporama, si on travaille avec la fancybox, c’est TOUTES les images de l’article qui défilent dans les diaporamas de la fancybox (y aurait-il un paramètre pour autoriser ou non, la fancybox avec un seul des diaporamas ?)

      En utilisation seul dans un article :
      -  Redimensionnement : ok
      -  Option particulièrement intéressante : |height=’auto’. Cela permet, une fois qu’on a réglé la largeur dans la config du plugin, d’accepter des séries de photos au ratio largeur/hauteur différent, sans se soucier d’un réglage fin de la hauteur.
      -  Quand on clique sur une image pour l’agrandir et qu’on revient au diaporama, celui-ci reste bloqué sur la dernière image vue. Il faut recharger la page pour que ça redémarre. Mais avec la fancybox cela n’arrive pas.
      -  Dernier petit souci : le formulaire de config du plugin s’affiche mal sur Safari et ne permet pas d’accéder à tous les réglages. Mais Firefox est OK.

    • J’ai mis en ligne 2 pages provisoires pour tester :
      http://www.lefourneau.com/ardoisemagique/-La-parole-aux-spectateurs-.html
      http://www.artsdanslarue.com/participer/Test-diaporama-avec-FancyBox.html

      -  Donc le redimensionnement fonctionne pour moi. Donne moi plus d’infos sur le « fait planter »
      -  Effectivement fancyBox fait défiler toutes images de la page. Je regarde ca

      Je ne comprends pas ton avant dernier point. Comment fais tu pour afficher l’image en grand sans FancyBox ?

      Pour le dernier point, effectivement ca ne va pas... Faut que je reprenne complètement le code de la page de config pour le mettre au goût du jour ;-)

    • Je reprends...

      et j’essaie à nouveau de faire 2 diaporamas dans un article avec un redimensionnement et... ça marche ! (pourtant j’aurais juré !) Désolé pour la fausse alerte :-(

      Par contre, quand je désactive fancybox, et que je clique sur une image quelconque de n’importe quel diaporama, ça m’affiche l’image dans sa grandeur originale, placée dans le coin en haut à gauche, dans une fenêtre suivante. Pour revenir au diaporama je dois cliquer sur la flèche retour du navigateur. (Je pensais que c’était le comportement normal...)
      Dans ce cas de figure, je confirme ma remarque : « Quand on clique sur une image pour l’agrandir et qu’on revient au diaporama, celui-ci reste bloqué sur la dernière image vue. Il faut recharger la page pour que ça redémarre. Mais avec la fancybox cela n’arrive pas. » Et je précise que s’il y a 2 diaporamas sur la même page, le phénomène n’arrive que pour le diaporama dont on a cliqué l’image. L’autre fonctionne toujours.

    • OK, mais ce n’est pas prévu pour fonctionner avec l’effet Fancy coché dans la page de config Et sans le plugin Fancy installé. C’est les 2 ou rien

    • En ce qui concerne l’effet FancyBox qui s’applique a toutes les images de l’article et non a celles diapo, c’est corrigé

    • Ah, ça bosse ! Merci pour la réactivité et l’efficacité.

    • Désolé, je relève un nouveaux petit problème :-)
      La fancybox ne tient plus compte de 2 règlages de sa configuration : « Boucler dans la liste des éléments d’une galerie » et « Afficher le titre sous la fenêtre / liste déroulante ». (Il me semble que cela date de la dernière MàJ de hier soir.) A mon avis, ce n’est pas fancybox qui est impliquée, car quand j’appelle la fancybox directement depuis des images du portfolio (documents joints), donc sans passer par sjcycle, le défaut ne se produit pas.

    • En l’état actuel c’est normal. Sjcycle utilise la librairie jquery installée par le plugin fancybox, mais pas les paramètres de configuration... Je ne vais pas avancer plus sur cette éventuelle intégration. J’ai gardé l’effet FancyBox de la précédente version du plugin, mais je trouve son intérêt limité vu que sjcycle réalise déjà un diapo...

    • Dommage, mais je comprends bien ;-) Perso, j’y trouve quand même une utilité occasionnelle. J’ai réinstallé l’avant-dernière version - que j’avais gardée - et tout semble fonctionner selon mes désirs. Je serai juste peut-être un peu embêté, le jour ou tu sortiras une nlle version majeure...

    Répondre à ce message

  • 6

    Bonjour

    Est ce qu’il serait possible d’envisager la couleur transparent dans la config des couleurs ?

    • Je rajouterais les soucis suivants sur le choix de l’effet :

      sélection de scrollup, turlRight me renvoie sur blindX
      le choix d’un effet avec une lettre X,Y Z bloc le mouvement

      Si yffic pouvais corriger ...

    • Salut Pierre, il y avait pleins d’erreurs dans la page de configuration... C’est corrige

    • Bonjour Yffic

      Merci pour tes corrections mais si je veux une couleur de fond transparent ?

      Pierre

    • OK, c’est rajouté : pour avoir de la transparence en fond, il faut mettre « transparent » dans les 2 champs de couleur dans la page de config

    • Bonjour

      Mais si on mets transparent, on est plus valide css 2.1 car on affiche #transparent or il ne faut pas de #. Est ce que la solution ne serais pas au webmaster de mettre le # ou bien le voir par defaut mais supprimable.

    • OK

      Je verrais pour le plugin palette dans je referais la page de config

    Répondre à ce message

  • Nous avons télécharger Spip 2.0 et aussi le squelette Multiflex 3. On arrive pas à télécharger le plugin CFG. Est-ce que quelqu’un peu nous guider, on a certainement pas bien procéder au commencement. Ùn gros merci.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom