Lightbox - utilisation de Multithumb

Multithumb est un plugin/mambot Joomla qui utilise la technique lightbox, technique permettant l'ouverture d'une image ou un texte en surimpression (dans un popup).

Slimbox
Slimbox

Un simple click sur l’image Slimbox ci-dessous ouvrira l’image dans sa taille réelle.

Le principe lightbox a débuté sur le site de Lokesh Dhakar.

Le mambot multhithumb est téléchargeable sur le site www.kreacom.dk.

Voici les options que j’utilise dans l’administration du mambot

  • Popup method : slimbox, qui est une version ultra légère de lightbox
  • Thumbnail width/height : donne la taille de votre vignette
  • Thumbnail proportions : Redimensionne la taille de votre image selon les paramètres Thumbnail
  • Resize images : doit être activé si vous comptez modifier la taille de vos grandes images. Dans ce cas, il est préférable de passer l'option PHP memory limit dans le bas de la page à 32MB
  • Apply only to content with : le mambot ne modifiera que les pages contenant le tag , je le laisse à NO
  • Exclude pages with : ce tag empêche le mambot de modifier les images de l’article

Présentation des systèmes de popup

  • No popup : les images sont réduites à la taille de thumbnail, mais ne pourront pas être agrandies via un click.
    Autant utiliser directement l’image à sa taille désirée avec l’option mt_ignore expliquée plus bas, dans le point Option mt dans l'alt de l'image.
  • Popup normal: ouverture d’une nouvelle fenêtre, c’est l’ancien système de popup
  • Lightbox : basé sur le travail de Lokesh Dhakar, l’inventeur du lightbox
  • Slimbox : version ultra légère du lightbox: 7kb
  • Greybox : même affichage mais avec une navigation plus visible en dehors de la photo. A voir en fonction des utilisateurs de votre site.
  • Thickbox : autre présentation graphique de slimbox, mais avec une transition que je trouve trop brutale.
  • Thumbnail Expansion : votre image s'agrandit directement dans la page. C ’est une option que je déconseille car votre mise en page s'en trouve totalement modifiée.

Attention lightbox, slimbox et thickbox ne peuvent être utilisés sur une même page, ce qui m'empêche de vous fournir les 3 exemples ci-dessous.

None
None
Normal
Normal
Slimbox
Slimbox
Greybox
Greybox
Expansion
Expansion
   

Rajout d'un tag devant mosimage

  • Le tag dans un article, va rendre inactif la création de toutes les vignettes.
  • Le tag est à placer avant le tag image que vous voulez modifier. Il transformera toute les images situés après lui.
  • vous permettra d’annuler les modifications du tag précédent
  • ouvrira l' image avec le système slimbox
  • va redimensionner votre image à 200px de large. Attention, l’option "Resize images" doit être activée dans l’administration.

Un outil sur le site www.kreacom.dk permet de créer rapidement vos tags

Option mt dans l'alt de l'image

La balise alt (texte alternatif) contient le titre de votre image. Multithumb permet d’utiliser cette balise pour modifier ses options par défaut.

La code à utiliser est mt_option : titre de l’image

  • mt_none : donne le même effet que
  • mt_ignore : il garde la taille originale de l'image. J’ai dû modifier le mambot pour arriver à ce résultat, je donnerai mon fichier source dès que j’aurai fini de le nettoyer
  • Mt_greybox : utilise l’option greybox

L'utilisation de la balise alt ne nécessite pas d'ouvrir le code html dans l’éditeur.

Alt Text
Alt Text
mt_none
mt_none
mt_ignore
mt_ignore
mt avec greybox
mt avec greybox

 
Suivant >