Thickbox

Publié le : 20 avril 2007 – Dernière modification le 21 décembre 2021 – par BoOz – 190 commentaires

1
2
3
4
5
66 votes
Le plugin Thickbox pour SPIP, qui permet d’afficher une image avec un effet de présentation à la mode.

Voici le plugin Thickbox pour SPIP.

Présentation

Il s’agit d’une adaptation du code original de Cody Lindley qui permet d’afficher une image avec un effet de présentation à la mode qui se met en route lorsque l’image est cliquée. Sur le même principe, on peut également afficher des fenêtre dites « modales », c’est à dire des pop-up HTML.

Le script se déclenche sur les images par exemple appelées dans un texte par <doc53|center>.

Sur le portfolio de SPIP, ca fonctionne directement comme une galerie d’images (précédant, suivant diaporama etc).

Installation

Installer le plugin

L’installation du plugin s’effectue comme pour tous les autres plugins. Il suffit de récuperer le zip, de le décompresser dans son répertoire « plugins », puis d’aller l’activer dans la page de gestion des plugins.

-  Installer un plugin

Toutes les informations

Télécharger le script

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

97 discussions

  • 4
    Gefonline

    Bonjour,

    L’effet Thickbox ne s’active plus depuis que je suis passé à la version 2.1. Coïncidence ou pb de compatibilité ?

    Merci de confirmer, gef

    • Cerdic

      as tu mis le plugin à jour et vider ton cache ? Il a déjà été corrigé pour fonctionner avec SPIP 2.1 (en l’occurrence il s’agit plus particulièrement de la version 1.4 de jQuery qui posait le problème)

    • Gefonline

      Problème de jQuery sans doute avec une instruction de trop dans mon head. Merci de m’avoir mis sur la voie !
      Gérard

    • john

      vous avez résolu comment ce probleme ?

    • Gefonline

      En fait c’était très bête. A l’origine, soit il y a plus d’un an, pour faire fonctionner Thickbox j’avais inclus dans mon head les lignes de code correspondant aux scripts et css nécessaires au fonctionnement du plugin.N’ayant pas vu que la balise #INSERT_HEAD était nécessaire (mais était-ce indiqué alors ?), j’avais fini par trouver cette solution sur les forums.. J’avais donc les lignes suivantes dans mon head :

      <script type="text/javascript" src="scripts/jquery11.js"></script>
<script type="text/javascript" src="scripts/thickbox.js"></script>
<link rel="stylesheet" href="scripts/thickbox.css" type="text/css" media="screen" />

      Après la mise à jour et surtout l’activation de la balise #INSERT_HEAD via le couteau suisse, il y a eu conflit avec ce code devenu obsolète, notamment je pense à cause du chargement de jquery11.js. Donc dans mon cas il m’a suffit de supprimer ces lignes ; en fait j’ai carrément repris le inc-head de la nouvelle version de spip, dans lequel figurent ladite balise, mais aussi une balise #INSERT_HEAD_CSS a priori fort utile. Le problème des mises à jour c’est qu’on ne pense pas toujours à vérifier si le code des squelettes a évolué et on traine toujours avec soi ceux des versions précédentes alors qu’il y a parfois de vrais améliorations dans les nouveaux squelettes (je pense entre autre au login ou au chargement des documents lors du passage de 1.9 à 2).

      Voilà, vous savez tout. Et merci encore à Cédric qui m’a mis sur la piste du jquery ;)

    Répondre à ce message

  • 2
    dimooz

    Bonjour tlm !

    Juste pour dire que depuis que j’utilise CKEditor (v3.1) le zoom thickbox ne fonctionnait plus ! En effet CKeditor insère les images avec une url de type :

    spip.php ?action=acceder_document&arg=19&cle=342ac032cfc8129c3aab7e978eed2bf7&file=jpg%2Fmon_image.jpg
    et ce type d’urls ne sont pas reconnues par thickbox...

    J’ai modifié le fichier thickbox.js et modifié ces 2 lignes :

    var urlString = /\.php|\.jpg|\.jpeg|\.png|\.gif|\.bmp/g ; (ajout de l’extention .php)
    et

    if(urlType == ’.php’ || urlType == ’.jpg’ .... (idem ici)
    Et depuis tout fonctionne à merveille !

    Si cela peut servir à quelqu’un...

    • VincentC

      doublons jquery je pense

    • Lili29

      Bonjour,
      j’ai essayé la soluce de dimooz mais malheureusement avec Acces restreint3 ça ne change rien.

    Répondre à ce message

  • tarentaise

    bonjour,
    je voudrais savoir comment afficher dans la fenêtre Thickbox le titre et le descriptif de l’image
    d’avance merci

    Répondre à ce message

  • gueffier

    bonjour,
    le plug-in fonctionnait parfaitement mais j’ai un conflit je pense, inconnu pour le moment. Les images ne s’ouvrent plus mais en bas de page de multiples lignes de code apparaissent !

    http://www.clg-pompidou-villeneuve.ac-versailles.fr/spip.php?article3

    merci pour votre aide

    Répondre à ce message

  • 3

    Bonjour

    Comment faire pour la validation W3C ?

    • Patrick

      Bonjour,

      Quelqu’un a t il réussi à intégrer la lecture d’un doc pdf dans la fenêtre de thickbow ? J’ai réussi en local avec fancybox via l’appel à une iframe extérieure, mais je préfère thickbox.

    • Patrick

      Bonjour,

      Je présente ICI comment placer une iframe dans thickbox2, ouvrant un pdf.

      Je ne suis pas à l’origine de ce travail, Eric Free/Online de spipnews m’a très largement mis sur la voie.

    • Patrick

      Bonsoir,

      J’ai réussi à aller plus loin, et faire jouer des pdf joints à un article, dans l’iframe thickbox, en cliquant sur le titre du pdf, sans code à placer dans la partie rédaction de l’article..

      Toujours visible et téléchargeable ICI .

    Répondre à ce message

  • 3
    ObiWanRiko

    Bonjour

    Un soucis récurrent avec ce remarquable plugin :
    Si un navigateur est configuré en vision large, alors les pages « ThickBox » apparaissent sans qu’on puisse (si on ne le sait pas) voir le haut de la page.
    Parce que le plugin essaie de repositionne le bloc dans la zone noir.
    Donc de ce fait le bouton fermer se retrouve masquer par exemple.

    Avez-vous déjà rencontrer ce type de problèmes ?

    On peut voir comment je fais :
    http://www.rambouillet.fr/2008/2008_RI_zyyne.html?KeepThis=true&TB_iframe=true&height=500&width=700

    Répondre à ce message

  • osarrat

    Bonjour à tous,

    J’avais un bug d’affichage sur mon site entre la Thickbox (qui chargeait un IFrame) et le nuage de tags en Flash du plugin WP-Cumulus. Cela faisait à l’affichage qqch de pas joli à voir dans Firefox.
    La seule solution que j’ai trouvée a été de cacher le nuage de tags à l’ouverture d’une Thickbox, et de le réafficher à la fermeture. J’ai donc modifier le code javascript pour rajouter l’appel à 2 fonctions callback qu’il suffit de remplacer dans le corps de sa page HTML ensuite pour avoir le comportement désiré.

    Voici les changements faits dans thickbox.js :
    l.72 au début de la fonction TB_show() :

    TB_show_preaction();

    l.393 à la fin de la fonction TB_remove, juste avant le « return false ; » :

    TB_remove_postaction();

    Et à la fin du fichier, la déclaration des 2 nouvelles fonctions vides par défaut :

    function TB_show_preaction()   {}
function TB_remove_postaction()   {}

    Il suffit ensuite donc de re-définir ces fonctions dans un bloc <script> après le #INSERT_HEAD, et tout roule.

    En espérant que cela puisse être utile à qqun.

    Répondre à ce message

  • Popsonne

    Salut tout le monde,
    Bon je fais juste un récapitulatif/compile de tuyaux de modifs trouvés principalement ici et ailleurs :
    Spip 2.0.3, et je suis parti d’un Thickbox déjà customisé, celui de JY Giraud.

    • Afficher le titre de mon document sous l’image dans la box, et pas sous la vignette dans la page de mon article (ça foutait en l’air ma belle mosaîque) : j’ai modifié le fichier « doc.html » (\privé\modèles). Ici on a le choix entre afficher le type de fichier et le poids, le titre et descriptif, ou le nom du fichier, ou un mix de tout ça. Voir document joint.

    Taille et couleur des fonts des boutons c’est dans « thickbox.css ».
    Voir document joint.

    Orthographe des boutons, et temps de pause pendant le diaporama par defaut sur un document, c’est dans « thickbox.js ». Voir document joint.

    J’ai fait fait un petit zip downloadable ici.
    Voilà, salut les spipiens. Je bosse en local, mais bientôt je serai online ! je reviens pour donner un lien. +

    Répondre à ce message

  • Thom

    bonjour,

    je souhaiterais que le plugin thickbox puisse afficher des données supplémentaires à propos des documents (date, auteur) et sépare le titre et la description pour l’usage de différente typo..

    comment puis-je m’y prendre ???

    Merci

    Répondre à ce message

  • heb

    merci pour ce plugin que j’utilise sur pas mal de mes sites.

    j’ai toutefois un ptit soucis : si sur la meme page que els vignettes, j’ai une video dailymotion (par exemple) via un emb, et bien lors de l’agrandissement la video s’affiche SUR l’image. (voir screen)

    firefox3, spip derniere version, squelette multisaison.

    qu’est ce qui bug a votre avis ?

    avec le plugin Nycéphoros je n’ai pas ce soucis.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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