LM-Zoom ~ documentation

 

Description

Ce plugin permet d'insérer une image réduite dans un article avec une vue popup.

Des extensions, comme Mavik Thumbnails, seraient parfaites si il n'y avait pas obligation d'indiquer la taille de l'image en pixels. Cela est incompatible avec une mise en page responsive où les images occupent X% de la largeur d'un conteneur dont la largeur est également définie à coup de pourcentage.

Je préfère créer mes vignettes manuellement, car cela me permet d'optimiser son poids et de ne pas avoir exactement la même vue.

Nouveautés version 2.0

• 8 types de lightbox responsives et certains avec gestion tactile
• ajout d'un paramètre pour prise en charge de toute les images d'une taille minimale
• création optionnelle de la légende à partir du nom du fichier
• ajout automatique de l'attribut 'alt' si non défini.
• gestion de plusieurs galeries sur une même page
• possibilité de définir les paramètres pour chaque page
• remplacement automatique des images trop grandes par une version réduite.

L'affichage des images de cet article est géré par le plugin LMZoom

Utilisation

 

Utilisation avec JCE

Pour le rédacteur, il suffit de

• choisir l'image qui sera affichée dans la lightbox.
• indiquer la description pour la balise <alt> et le titre de la lightbox
• indiquer la taille relative de la vignette. En général, la largeur suffit.
• dans l'onglet "Avancé", indiquer la classe pour prise en charge

Pour les inconditionnels de la saisie en HTML, il permet également de gagner du temps. Le code se résume à ceci:

<img  

 src="/images/image-mini.jpg"

class="zoom"

alt="légende image"

height="NaN" width="100%" 

>

Depuis la version 2.0, avec l'option toutes les grandes images, c'est encore plus simple

<img  

 src="/images/Un-joli-tracteur_XYZ--11-mini.jpg"

height="NaN" width="100%" 

>

Comme la taille de la grande image correspondant à "Un-joli-tracteur_XYZ--11-mini.jpg" est plus grande que la taille minimale, elle sera affichée dans une lightbox. La légende, ainsi que l'attribut ALT défini à partir du nom du fichier sera Un joli tracteur XYZ-11. Les tirets et underscores sont remplacés par des espaces. Les tirets multiples par un seul tiret.

Configuration - paramétrage

L'installation du plugin se fait de la manière habituelle sous Joomla!

Le paramétrage consiste à activer le plugin.

Si les réglages par défaut ne vous conviennent pas, vous pouvez définir :

Onglet "Plug-in"

• Type de popup : 8 types dont Slimbox par défaut
  Attention les types smartphoto et swipebox ne sont pas compatible avec Joomla 4.
  Arg: type=le nom de la lightbox
• Zoom pour : La méthode de prise en charge des images:
  0 - uniquement celle d'une classe donnée
  1 - toutes sauf celles d'une classe
  2 - toutes les images
  3 - celles d'une taille minimale ou avec suffixe.
  Arg: for=0|1|2|3
• Classe : Le nom de la classe ou des classes ciblées par le paramètre précédent
  Arg: class=nom classe
• Taille minima : dimension du petit coté de l'image pour prise en compte par la 4ème option de 'Zoom pour'
  Arg: minsize=dimension en pixels
• Suffixe petite image : si le nom de l'image se termine par ce suffixe, le plugin va considérer qu'il s'agit de l'image vignette et que l'image affichée dans le popup a le même nom sans ce suffixe
  
  Arg: suffix=le suffixe
• Galerie : permet de créer des galeries automatiquement avec toutes les images de la page.
  Une galerie sera toujours créée si on indique son nom dans les attribut de l'image.
  Exemple <img src="/image.jpg" gallery="son_nom">
  Arg: gallery=0|1
• Utiliser le nom de fichier : forcer l'utilisation du nom du fichier image comme légende pour la lightbox. Les underscores et les tirets seront remplacés par des espaces. Pour utiliser un tiret, il suffit de le doubler dans le nom du fichier. S'il existe, le suffixe pour petite image sera supprimé.
  Arg: usefilename=0|1
• Curseur lors survol : l'image qui sera utilisée pour le curseur lors du survol.
  'Aucune sélection' permet de ne pas définir de curseur.
  'Paramètres par défaut' permet d'utiliser le curseur zoom-in proposé par le navigateur client.

  Vous pouvez ajouter vos propres images de curseur dans le dossier plugins/content/lmzoom/img. Elles seront disponibles dans la liste.

  Arg: cursor = nom image|-1(aucun)|0(defaut)
• CSS lors survol : CSS personnalisé appliqué lors du survol de l'image.
  Il est inutile d'indiquer le sélecteur. Uniquement les règles.
  Exemple de code :
  

  -webkit-filter: brightness(80%);-ms-filter: brightness(80%);filter: brightness(80%); /*assombrir */
  transform: rotate(2deg); /*pivoter*/
  outline:red 2px solid; /*bordure */
  box-shadow: 0 0 15px 5px rgba(0,0,0,0.5); /*ombre */

  Arg: css = votre code css

Onglet "Resize"

• Redimensionnement automatique: Désactivée par défaut, cette option vous permet de remplacer une photo trop lourde par une version plus petite.
• Hauteur maximale: hauteur du rectangle dans lequel l'image doit s'inscrire. Par sécurité, la valeur minimale est de 600 pixels
• Largeur maximale: largeur du rectangle dans lequel l'image doit s'inscrire. Par sécurité, la valeur minimale est de 900 pixels
• Niveau de qualité: une valeur entre 30 et 100. Plus cette valeur sera faible, plus le poids de l'image sera léger mais au détriment de la qualité.
• Sauvegarde original: permet de conserver une copie de l'original avec le nom suffixé par -bak; Par défaut, pour diminuer le poids des sauvegardes, l'image d'origine est réécrite.

Paramètres spécifiques à une page

Par défaut, les paramètres appliqués sont ceux définis dans la configuration du plugin.

Il est possible de les modifier pour un article en saisissant dans le corps de l'article le shortcode suivant :

{lmzoom usefilename=1 | gallery=cobox | gallery=0 }

Mettre entre accolades le mot lmzoom suivi des arguments et leurs valeurs en les séparant par un caractère pipe (AltGr+6)

{lmzoom minsize=300px}

Comment indiquer la légende d'une photo

Par défaut, c'est l'attribut ALT qui est utilisé pour la légende de la photo.

Si l'attribut ALT n'est pas renseigné, on utilise celui de l'attribut TITLE s'il existe, sinon le nom du fichier sera utilisé.

Si le paramètre 'Utiliser le nom de fichier' est sur oui, le nom de fichier sera utilisé pour la légende. ALT sera inchangé.

Note: si la balise ALT est vide, elle est forcée avec le texte utilisé pour la légende.

Les lightbox disponibles

Attention les lightbox fancybox sont sous licence GPLv3. Il est nécessaire d'acquérir une licence en cas d'utilisation commerciale.

Consulter la présentation visuelle des lightbox

Configuration des types de lightbox

La configuration se fait à l'aide d'un fichier .json dans le sous-dossier du type de plugin dans le dossier lib du plugin. Consulter la documentation. Un lien vers celle-ci est disponible dans le dossier plugins/content/lmzoom/lib/xxx.

Il est relativement facile de supprimer ou d'ajouter un type de lightbox. Une documentation sera bientôt disponible.

Toutes ces opérations demandent une certaine expertise.

Démonstration

Toutes les photos de ce site qui au survol de la souris affiche cette petite loupe utilisent ce plugin.

Téléchargement  

• plg_lmzoom-v5.0.zip (197.62 ko - 24/11/2023 13:00) téléchargé 9 fois
• plg_lmzoom-v2.1.1.zip (177.73 ko - 26/11/2023 18:26) téléchargé 22 fois

Les autre articles sur LM-ZOOM

• LMZoom ~ comparatif lightbox
• LM-Zoom ~ mémento rédacteur

Support

Pour partager vos questions et suggestions, c'est sur le forum LM-Zoom