Accueil > Informatique > Mes adaptations pour SPIP > Plugin Thickbox V2 personnalisé

Plugin Thickbox V2 personnalisé

lundi 17 décembre 2007

A noter : depuis SPIP 3, ce plugin n’est plus utile car le plugin Mediabox, intégré en standard avec SPIP, remplit le même rôle.

En fouillant un peu dans les Plugins de SPIP, j’en ai trouvé un très intéressant pour faire aisément de jolis albums photo : THICKBOX. Je ne vais pas ici détailler son fonctionnement, on peut le trouver sur le site de spip-zone à cette adresse .

En bref, ce plugin permet d’afficher des images de manière légère et très jolie, en avant-plan, à base d’un javascript et de manière complètement intégrée à SPIP . Notamment, on peut utiliser le portfolio d’un article pour regrouper des documents joints à un article. Attention, il faut utiliser "Ajouter un document" et non pas "Ajouter une image" pour ajouter les images au portfolio de l’article. De plus, dans la config. de SPIP, il faut activer "Générer automatiquement les miniatures des images" dans les fonctionnalités avancées.

J’en ai fait une version personnalisée qui apporte les fonctionnalités suivantes :

- Francisation des zones à cliquer (<- Précédente ; Suivante -> ; Diaporama ; Stop) et des bulles d’aide
- Correction de l’arrêt du mode Diaporama : on réaffiche l’image actuelle en remplaçant la zone [Stop] par [Diaporama]
- En mode diaporama, les touches <- et -> sont désactivées (les zones à cliquer également)
- Ajout des zones à cliquer [+ rapide] et [- rapide] pour contrôler la vitesse du Diaporama (4 secondes par défaut). Le délai est réinitialisé à 4 secondes à chaque lancement du mode Diaporama
- Seules les touches ESC pour sortir, et les touches <- et -> pour image précédente et image suivante sont conservées
- Homogénéisation des syntaxes (pour une meilleure lecture)
- En mode Diaporama, le clic sur l’image (pour image suivante) est désactivé
- Ajout de commentaires dans le Javascript
- Police plus grande pour les zones à cliquer (modif. du CSS)

Pour ceux que ça intéresse, voici ma version de Thickbox V2 (Version 1.01 du 10/06/2009) :

Plugin Thickbox2_jyg

Notes de version :

- 1.01 (10/06/2009) :

  • Correction de bug pour utilisation des URLs de type "arbo"
  • Police un peu plus petite pour les zones à cliquer (modif. du CSS)

- 1.00 (10/01/2008) : version initiale

Pour voir une petite démo, rendez-vous à l’article suivant :

Mon Def en photos

Sympa, non ?

Messages

  • Bonjour,
    En effet c’est pas mal, c’est ce que je cherche mais je vais me permettre de poser quelques questions ?
    Le package que l’on peut charger sur votre site n’est peut pas complet car nous n’avons pas 4 secondes par défaut mais 9 !????
    De plus je souhaiterai ajouter sous la diapo (en mode diapo et hors mode diaporama par exemple ! ce serait un plus plutôt sympa) le contenu du champ "descriptif" de la table id_document (ce champ est renseigné lorsque la photo est saisie dans le portfolio de l’article. En effet en tant que photographe amateur je souhaite donner des détails spécifiques (ex : réglages, ambiance, lumière etc.) à la photo en plus du titre.
    Je ne suis pas très doué en html et java et en php aussi je n’ai pas réussi à déterminer dans quel(s) fichier(s) cela était fait... je rame grave !
    Cordialement
    Pour en reparler éventuellement
    Zickeur
    Je travaille à l’élaboration d’un petit site web perso pour présenter quelque photos de moi même et de mon club - aussi je travaille sur PC WinXP avec EasyPHP 5.3.1 pour tester avant de mettre en prod sur Free

    • Je viens de récupérer la version 1.01 présente sur le site (par sécurité) pour la tester. Le délai par défaut du mode diaporama est bien de 4" (testé à l’instant sous Firefox, Internet Explorer, Opéra, Google Chrome). Etrange... Un problème d’interférence avec un autre plugin ?

      Concernant l’affichage du champ "Description", cela ne dépend pas du plugin, mais du squelette du site. En particulier, dans le fichier inc-documents.html qui gère le portfolio d’un article, on peut jouer dans la boucle de lecture des documents sur ce qui sera affiché sous l’image. Par défaut, dans le squelette de la dist officielle (comme dans mon squelette JYG Web), c’est le champ "Titre du document" qui est utilisé (balise #TITRE). Si on veut le champ "Description", il suffit de remplacer la balise #TITRE par la balise #DESCRIPTIF. De plus, le "couper80" (80 caractères maxi) est peut-être un peu restrictif pour une description. A modifier selon les besoins.

      Voilà le code modifié dans le fichier inc-documents.html pour exemple :

      <B_documents_portfolio>
      <div id="documents_portfolio">
              <h2><:info_portfolio:></h2>
              <BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}>[
              <a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick="location.href='[(#URL_ARTICLE
                      |parametre_url{id_document,#ID_DOCUMENT}
                      )]#documents_portfolio';return false;"[ class="(#EXPOSER)"][ title="(#DESCRIPTIF|attribut_html|couper{80})"]>[(#FICHIER
                      |image_reduire{0,100}
                      |inserer_attribut{class,spip_logos}
                      |inserer_attribut{alt,[(#DESCRIPTIF|attribut_html|couper{80})]})]</a>
              ]</BOUCLE_documents_portfolio>
      </div>
      </B_documents_portfolio>

    Répondre à ce message

  • Bonjour,
    avant toute chose je vous souhaite une bonne année.
    J’ai une question qui doit être simple pour vous, je pense.
    Lorsque j’agrandis l’image en cliquant dessus je voudrais en plus du titre de celle-ci afficher son descriptif mais je ne vois pas où ni comment il faut faire.
    D’avance merci

    • Merci, je vous souhaite également une très bonne année.

      Le plugin n’est pas conçu pour afficher les deux champs titre et descriptif. A la base, c’est le titre qui apparaît. Mais, comme je l’ai indiqué dans un autre message, on peut remplacer le titre par le descriptif et c’est dans le squelette que ça se passe, en particulier dans le fichier inc-documents.html. On peut également sans doute mettre les deux balises #TITRE et #DESCRIPTIF à la place de #TITRE seulement comme ceci :

      (#TITRE|attribut_html|couper{80})(#DESCRIPTIF|attribut_html|couper{80})

      A tester...

    Répondre à ce message

  • Bonjour Jean-Yves,

    Une bonne année 2011, il n’est pas trop tard :-).

    Ton plugin est installé sur mon site et j’aurai voulu savoir s’il est compatible 2.1.8 ? Je compte passer en 2.1.8 le week-end prochain.

    Merci d’avance.

    Christian

    Répondre à ce message

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.