SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 229 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > Thickbox > Thickbox pour les rédacteurs

Thickbox pour les rédacteurs

24 octobre 2009 – par Jean-Baptiste Pressac – commentaires

3 votes

Thickbox est le nom d’un effet en Ajax permettant d’afficher du contenu dans un calque, au dessus de la page. Cet effet est de plus en plus utilisé pour remplacer les fenêtres pop-up. Ce tutoriel décrit l’utilisation de cet effet pour les rédacteurs d’un site SPIP.

L’affichage de contenu dans un calque n’est pas disponible par défaut dans SPIP. Pour implémenter cet effet dans SPIP, commencez par installez le plugin Thickbox.

Configurez ensuite SPIP pour qu’il génère automatiquement les vignettes de vos images :

  1. Allez dans le menu Configuration > Fonctions avancées.
  2. Cliquez ensuite sur l’image correspondant à une méthode de fabrication des vignettes. Si aucune image n’apparaît, alors le serveur qui héberge votre site n’a pas été configuré pour utiliser de tels outils. Contactez le responsable technique du serveur et demandez-lui d’installer les extensions « GD » ou « Imagick ».
  3. Cochez ensuite le choix "Générer automatiquement les miniatures des images.".
  4. Saisissez la taille des vignettes.
  5. Validez.
PNG - 151.7 ko
Configuration de la méthode de fabrication des vignettes
PNG - 28.3 ko
Dépot d’une image dans le portfolio

Ajoutez l’image à votre article. Une fois l’image téléchargée, cliquez sur le triangle en regard du nom de l’image. Cliquez ensuite sur "Déposer cette image dans le portfolio".

Les images ajoutées dans le portfolio étant considérées comme des documents, insérez le raccourci typographique correspondant à l’image en utilisant le raccourci typographique :

<doc1>

SPIP remplace automatiquement le raccourci typographique par la vignette de l’image. Un clic sur cette vignette permet d’afficher l’image originale dans un calque.

PNG - 293.8 ko
Affichage de la vignette de l’image déposée dans le portfolio

Si la taille de la vignette générée par SPIP ne vous convient pas, vous pouvez rajouter la votre depuis le formulaire de l’image :

  1. Cliquez sur le titre de l’image.
  2. Cliquez sur "Vignette personnalisée".
  3. Téléchargez votre vignette.
PNG - 31.9 ko
Ajout d’une vignette personnalisée

P.-S.

Le texte sur la cataire, appelée aussi herbe à chat est un extrait de Wikipedia. La photo affichée dans la capture d’écran est de l’auteur de cet article.

Dernière modification de cette page le 10 juillet 2010

Retour en haut de la page

Vos commentaires

  • Le 27 décembre 2009 à 09:07, par Caméléon77 En réponse à : Utilisation simultanée de Thickbox et de Fancybox

    Bonjour,

    J’ai effectivement créé deux squelettes différents pour mes articles, l’un qui utilise la class « thickbox » pour afficher des photos avec légende et diaporama, l’autre qui utilise la class « fancybox » pour afficher des photos sans légende. Mais j’ai en fait toujours les deux types d’affichage superposés, même en vidant le cache, en tirant la chasse d’eau et en fermant le gaz. Le diable étant dans les détails, quelle précaution supplémentaire ai-je oublié ?

    Merci pour votre réponse.

    Répondre à ce message

  • Le 24 décembre 2009 à 09:43, par Caméléon77 En réponse à : Utilisation simultanée de Thickbox et de Fancybox

    Bonjour. Je veux utiliser SPIP pour mon site de photos. Pour certaines catégories de photos (simples galeries), j’utilise Fancybox. Mais pour d’autres catégories de photos (reportage photo avec légende), je préférais utiliser Thickbox qui convient mieux. Mais si j’active les deux plugins, quand je clique sur les vignettes, mes photos s’affichent avec les deux systèmes superposés. J’ai pourtant pris soin dans le « rel » du lien des vignettes de mettre « thickbox » dans un cas et « fancybox » dans l’autre, mais cela n’a aucune action. Je débute en SPIP et j’ai besoin de votre aide. Merci !

    • Le 24 décembre 2009 à 10:54, par Shnoulle En réponse à : Utilisation simultanée de Thickbox et de Fancybox

      Salut,

      Ce n’est pas le rel, mais le class qu’il faut changer.

      Le mieux serait de faire ton propre squelette , de décider quand c’est tickbox ou fancybox. Comme c’est du jquery : chacun va sélectionner ses photos en fonctions d’une classe. Y a un peu de travail, mais c’est faisable.

       :)

    Répondre à ce message

  • Le 19 novembre 2009 à 13:36, par ? En réponse à : Utilisation de Thickbox

    Dans la ’fausse pop up’ qui s’ouvre avec le document, est-il possible de modifier le template pour ajouter une i-frame ou un javascript sous la photo ?

    Si oui comment ?

    D’avance merci pour votre aide

    Répondre à ce message

  • Le 18 novembre 2009 à 13:17, par dominique En réponse à : Utilisation de Thickbox

    j’utilise spip 1.92 qui semble compatible avec thickbox pourtant si j’arrive à afficher le cadre blanc du plugins l’image elle ne s’affiche pas malgré un message « loading » encourageant. Pouvez vous me dire ce que j’oublie. J’ai mis le #INSERT_HEAD sur différents squelettes dont article. Je désespère.

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Adaptive Images

    15 novembre 2013 – 69 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Social tags

    8 septembre 2008 – 428 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Module de Paiement Stripe

    17 octobre – commentaires

    Stripe est un prestataire de paiement externe https://stripe.com/fr qui propose une API moderne et une interface de paiement extrêmement conviviale et efficace. Ce module permet les paiements à l’acte et les paiement récurrents. Configuration (...)

Ça spipe par là