LM-ZOOM Une nouvelle version entièrement rééecrite avec plus de modèles de lightbox, mais surtout une encore plus grande facilité d'utilisation: plus rien à faire!.

Le choix d'une lightbox est une question de goût, de poids des fichiers, de fonctionalités, mais aussi de compatibilité avec vos autres extensions. Si un type ne fonctionne pas avec votre template, le plus simple sera d'en choisir un autre.

Cette page utilise la lightbox SmartPhoto

COBOX

cobox

6Ko - licence MIT - auteur Garwih
Compatible IE8+ - Galerie unique
non touch-friendly sur smartphone

FANCYBOX

fancybox

28Ko - licence GPLv3 utilisation non commerciale - auteur fancyapps
Compatible - Galeries multiples
non touch-friendly sur smartphone

FANCYBOX3

fancybox3

66Ko - licence GPLv3 utilisation non commerciale - auteur fancyapps
Compatible IE10+ - Galeries multiples avec vignettes
Touch-friendly sur smartphone Multilangue possible

LIGHTBOX2

lightbox2

14Ko - licence MIT - auteur Lokesh Dhakar
Compatible IE9+ - Galeries multiples
non touch-friendly sur smartphone

SLIMBOX

slimbox

12Ko - licence MIT - auteur digitalia.be
Compatible IE6+ - Galeries multiples
non responsive

SMARTPHOTO

smartphoto

52Ko - licence MIT - auteur appleple
Galeries multiples avec vignettes
Touch-friendly sur smartphone

SWIPEBOX

swipebox

19Ko - licence MIT - auteur brutal design
Compatible IE9+ - Galeries multiples
non touch-friendly sur smartphone

VIEWBOX

viewbox

8Ko - licence MIT - auteur Pavel Khoroshkov
Compatible IE9+ - Galeries multiples
non touch-friendly sur smartphone

Touch-friendly signifie qu'il est possible de parcourir la galerie et d'agrandir les images par des glissés des doigts sur le smartphone. Non responsive indique que la photo n'est pas redimensionnée.

Les autres articles sur LM-ZOOM

lmzoom

Vous écrivez un article pour un site Joomla! utilisant le plugin LMZoom.

Ce plugin facilite la mise en place d'images, mais demande de connaître la façon de faire

Préparation de l'image

  1. Redimensionner l'image pour qu'elle tienne dans un rectangle horizontal de 800px de large sur 600px de haut. Cela veut dire que la hauteur d'une image verticale ne pourra excéder 600px.

    Depuis la version 2, le plugin peut redimensionner automatiquement les images.

  2. Sauvez-la sous un nom sans espace, ni caractères accentués. Je vous conseille de mettre le nom de votre société ou site suivi d'une description courte, mais informative du sujet de l'image. Exemple: masociete-produit-xyz.jpg, masociete-produit-xyz-details-facade.jpg

Si votre article contient de nombreuses images, il est souhaitable d'en faire également une version de taille réduite pour alléger le poids et le temps de chargement de la page.

Du fait que la taille de l'image va varier en fonction de la taille de l'écran sur lequel elle sera vue, la taille idéale est la plus grande utilisé dans un article.

Cette image réduite sera sauvée avec le même nom que la grande image, mais en ajoutant "-mini" à la fin de son nom.
Exemple: masociete-produit-xyz-mini.jpg

Transfert de l'image vers le site Internet

Vous pouvez utiliser un client FTP, mais une solution facile est d'utiliser la fonction prévue par l'éditeur JCE.

Cliquer sur cette icône image dans la barre d'outils de l'éditeur JCE pour ouvrir cette fenêtre.

LMZoom - Upload d'images avec JCE

  1. sélectionner le dossier qui doit recevoir la ou les images - TRES IMPORTANT
  2. cliquer sur ce bouton pour afficher la fenêtre "Envoyer"
  3. cliquer sur "Explorer" pour ouvrir une boîte de sélection de fichiers. Il est également possible de glisser directement les images sur cette fenêtre.
  4. un dernier clic sur "Insérer" pour lancer le transfert

Insérer une image dans l'article

Placer le curseur à l'emplacement exact qui doit recevoir l'image dans l'article, puis cliquer sur l'icône "Insérer/modifier une image" image dans la barre d'outils de l'éditeur JCE pour ouvrir cette fenêtre.

LMZoom - insérer une image avec JCE

  1. sélectionner l'image à utiliser. La version "-mini" si elle existe
  2. indiquer une description pour le titre de la lightbox. Elle servira également pour l'attribut "alt", si prisé par Google.

    Avec LM-Zoom v2.0, on utilise dans l'ordre le contenu de TITLE, puis ALT et enfin le nom du fichier.
    Sur option, on peut imposer le nom de fichier.
    Si la balise ALT est vide, elle sera automatiquement remplie avec le titre ou le nom du fichier.

  3. indiquer la taille relative de la vignette. En général, la largeur suffit. NaN (Not A Number) signifie que la dimension sera calculée automatiquement.
  4. vous pouvez indiquer la position de l'image. la colonne "Prévisualisation" à droite vous donne un aperçu du résultat.
  5. vous pouvez également spécifier une marge pour éloigner le texte de l'image
  6. avant de cliquer sur "Insérer", il ne faut pas oublier de spécifier la classe zoom dans l'onglet "Avancé" (inutile avec LM-Zoom v2.0)

LMZoom - JCE - Ne pas oublier d'indiquer la classe zoom

Pour les inconditionnels du code HTML

Ce plugin simplifie la saisie et la relecture du code HTML nécessaire pour insérer une image.

<img 
src="/images/image.jpg"
class="zoom"
alt="légende image"
height="NaN" width="100%"
>

Avec la version 2.0, le code est encore plus simple:

<img 
src="/images/une-jolie-fleur-mini.jpg"
height="NaN" width="100%"
>

La légende et l'attribut ALT sont construits à partir du nom du fichier. Mais cela reste optionnel!

Les autre articles sur LM-ZOOM

LM-ZOOM Ce plugin permet d'insérer une image réduite dans un article avec une vue agrandie dans un popup. Il est 100% responsive et simplifie la saisie avec un éditeur WYSIWYG ou en HTML pur

LM-ZOOM Ce plugin permet d'insérer une image réduite dans un article avec une vue agrandie dans un popup. Il est 100% responsive et simplifie la saisie avec un éditeur WYSIWYG ou en HTML pur