Plugin SPIP : diaporama avec jQuery

lundi 17 août 2009, par Minimalteck

 Présentation du plugin Spip jQuery Cycle :

- " sjcycle " est un diaporama paramétrable pour Spip basé sur la librairie javascript jQuery et les plugins :

- Développé pour Spip [2.0.x] il utilise :

  • les formulaires CVT ;
  • le moteur de configuration CFG [1.10] ;
  • les modèles pour une insertion aisée dans le texte des articles.

- Fonctionnalités principales :

  • Paramétrage des effets, de la vitesse de transition, de la taille du diaporama, etc.
  • Possibilté d’afficher plusieurs diaporama au sein d’un même article
  • Possibilté de sélectionner les images à associer à chaque diaporama

 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à vous désirez situer le diaporama.

- Ce raccourci comporte jusqu’à 3 paramètres, ordonnés et séparés par le caractère "|".

  1. <sjcycleN>
    Premier paramètre, "N", obligatoire :
    Correspond au numéro de l’article en cours.
    Il permet de cibler les images liées à un unique article.
    Astuce : Vous pouvez ainsi insérer un diaporama avec les images d’un article dans un autre article.
  2. <sjcycleN|ALIGN>
    Second paramètre, "|ALIGN", optionnel :
    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 :
    1. "left" : à gauche du texte ;
    2. "center" : centrer dans le texte ;
    3. "right" : à droite du texte.
  3. <sjcycleN|ALIGN|docs=n1,n2>
    Troisième paramètre, "|docs=n1,n2,[…],nx", optionnel :
    Permet de spécifier la liste d’images à afficher dans le diaporama.
    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.
    Les arguments de sélection "n1,n2,[…],nx" du paramètre "|docs=" :
    Ils se composent d’une suite de numéros d’images séparées par des virgules sans espace.
    Sous chaque image est indiqué un raccourci typographique du type "<imgXX|left>", "<docXX|left>" ou "<docXX>", où "XX" désigne le numéro de l’image correspondante.
    Ainsi le paramètre "|docs=1,3", sélectionne les images numéro 1 et 3 de l’article courant.
    Astuce : Vous pouvez utiliser le raccourci en ne passant qu’un seul numéro d’image au paramètre "|docs=" afin de bénéficier de l’effet "FancyBox" : un clic sur l’image redimensionnée du diaporama permet d’afficher l’image originale en superposition.

 Ce qu’il faudrait faire…

- Intégrer plus d’options du jQuery Cycle Plugin ;

- Créer la fonction d’install du plugin pour installer les paramètres par défaut lors de l’activation du plugin et surtout nettoyer les "metas" lors de sa désactivation… J’ai rencontré un problème lors de cette mise en place :

<?php
if (!defined("_ECRIRE_INC_VERSION")) return;
function sjcycle_install($action){
        include_spip('sjcycle_fonctions');
        switch ($action){
                case 'test':
                        //Contrôle du plugin à chaque chargement de la page d'administration
                        // doit retourner true si le plugin est proprement installé et à jour, false sinon
                        if(!lire_config('sjcycle')){
                                return true;
                        } else {
                                return false;
                        }
                        break;
                case 'install':
                        //Appel de la fonction d'installation. Lors du clic sur l'icône depuis le panel.
                        //quand le plugin est activé et test retourne false
                        if(!lire_config('sjcycle')){
                                ecrire_config('sjcycle',serialize(init_sjcycle_default('default_value_list')));
                        }
                        break;
                case 'uninstall':
                        //Appel de la fonction de suppression
                        //quand l'utilisateur clique sur "supprimer tout" (disponible si test retourne true)
                        effacer_config('sjcycle');
                        return true;
                        break;
        }       
}
?>

le code me semblait pourtant correct, mais à chaque fois que le cas ’test’ (affichage de la gestion des plugin, le système écrasait les valeur par celles par défaut… blink
Même en passant par lire_meta() en lieu et place de la version fournie par CFG… je n’ai pas plus creusé que ça… c’est sûrement tout bête ! blush

- compacter les css ;

- etc.

 Pour conclure

Ce plugin s’adresse avant tout aux personnes désireuses d’agrémenter leur site SPIP de diaporamas légers mais performants, avec un descriptif de l’image en survol, un affichage en superposition.

Actuellement taggé en "test", ce plugin est cependant totalement fonctionnel et est utilisé sur des sites en production.

 Démonstration

- <sjcycle41|center|docs=9,10,11,12>

Une première séries d’images…
- <sjcycle41|center|docs=13,15,14>

Roulage à Carole
Départ...
Retour au stand

Et voici lz seconde, avec titres et descriptifs…

SPIP | squelette | | Plan du site | Suivre la vie du site RSS 2.0