Ici & Là

01 Société 02 Histoire 03 Science 04 Science fiction 05 SPIP 06 NTIC 07 Sondages 08 Divers
La meilleure façon de réaliser ses rêves est de se réveiller (Paul Valéry)

Accueil > SPIP > Quelques plugins utiles > Plugin SPIP jQuery Cycle 2 pour Spip 3.1 et 3.0

Plugin SPIP jQuery Cycle 2 pour Spip 3.1 et 3.0

samedi 18 février 2017, par François Daniel Giezendanner

Notez cet article
0 vote

 Introduction

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...


 Spip jQuery Cycle2 versus Spip jQuery Cycle

Il peut être utile de considérer les deux versions

Nouvelle version : « Spip jQuery Cycle2 »
Ancienne version : « Spip jQuery Cycle »


 Nouvelle version : « Spip jQuery Cycle2 »

La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/.

Voici cette nouvelle librairie mise en plugin pour SPIP.

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

Il est nécessaire d’utiliser un squelette qui respecte la norme HTML5.

Modèle :
Pour une utilisation courante, le diaporama s’insère dans les textes par le modèle <articleN|cycle> où « N » est le numéro de l’article dont on veut afficher les images.


 Ancienne version : « Spip jQuery Cycle »

Modèle :
Pour une utilisation courante, le diaporama s’insère dans les textes par le modèle <sjcycleN> où « N » est le numéro de l’article dont on veut afficher les images.

Pour la compatibilité avec le plugin « jQuery Cycle » le modèle <sjcycleN> 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.


 Syntaxe

Les modèles <articleN|cycle> ou <sjcycleN> permettent d’insérer facilement un ou plusieurs diaporamas au sein d’un article : il vous suffit de les recopier à l’intérieur de la case « Texte » de l’article, là où vous désirez situer le diaporama.

Ces modèles comportent plusieurs paramètres séparés par le caractère « | ».

On règle les paramètres des diaporamas dans un formulaire (accès dans l’espace d’administration : Squelettes > Cycle2) qui permet de modifier rapidement les options d’affichage.

Voici quelques modèles de syntaxe :

Nouveau modèle :

<article16|cycle|center>

<article16|cycle|center|docs=101,102,103,104|id_diapo=1>

<article16|cycle|center|legende=faut pas rêver !>

<article16|cycle|center|docs=101,102,103,104|width=400|height=240|legende=faut pas rêver !>

<article16|cycle|center|docs=101,102,103,104|width=400|height=240|legende=faut pas rêver !|liens_individuels=article>

Ancien modèle :

<sjcycle16|center>

<sjcycle16|center|docs=101,102,103,104|id_diapo=1>

<sjcycle16|center|legende=faut pas rêver !>

<sjcycle16|center|docs=101,102,103,104|width=400|height=240|legende=faut pas rêver !>

<sjcycle16|center|docs=101,102,103,104|width=400|height=240|legende=faut pas rêver !|liens_individuels=article>


 Exemple 1 d’application, le bandeau du site

Dans le Paramétrage général des diaporamas du site (Dans l’Espace d’administration, aller à : Squelettes > Cycle2) nous avons fixé :
Largeur maximum = 800
Hauteur maximum=200

Ce qui correspond aux dimensions des images utilisées pour le bandeau. Le bandeau du site est alors obtenu avec l’instruction :

<article232|cycle|center|liens_individuels=article>
ou
<sjcycle232|center|liens_individuels=article>

placée dans le champ « Slogan du site », soit :

chamomile 800x200 corn field 800x200 cornfield 800x200 daisy 800x200 flower 800x200 flower meadow 800x200 flowers 800x200 meadow 800x200

 Exemple 2 d’application

<article4|cycle|center|largeurmax=400|hauteurmax=240|liens_individuels=article>
ou
<sjcycle4|center|largeurmax=400|hauteurmax=240|liens_individuels=article>


 Exemple 3 d’application

<article4|cycle|center|largeurmax=640|hauteurmax=400|liens_individuels=article>
ou
<sjcycle4|center|largeurmax=640|hauteurmax=400|liens_individuels=article>


 Paramétrage général

Voici une copie du formulaire dans lequel on règle les paramètres des diaporamas (accès dans l’espace d’administration : Squelettes > Cycle2), cela permet de modifier rapidement les options d’affichage.


 Source et documentation