Plugin Compatible Joomla 3.x Responsive Français

Description

LM-ZOOMCe 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.

LM-Zoom dispose des fonctionnalités suivantes:

  • il gère le responsive, la taille de l'image est définie en pourcentage pour s'adapter au template comme Bootstrap
  • il prend en compte toutes les images ou uniquement celles de classe(s) spécifique(s).
  • il permet d'utiliser ses propres images vignettes
  • il gère automatiquement la création d'une galerie
  • il facilite l'insertion d'images par les rédacteurs
  • il reprend les infos de la balise 'alt' pour la légende du popup

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

LMZoom - Définir une image avec JCE

 

LMZoom - Spécifier la classe dans JCE

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"

LMZoom - Paramètres principaux

  • Type de popup : 8 types dont SmartyPhoto par défaut
    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"

LMZoom - Redimensionnement

  • 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)

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

--- Cobox fancybox fancybox3 lightbox2 slimbox Smartphoto swipebox Viewbox
poids 6Ko 28Ko 66Ko 14Ko 12Ko 52Ko 19Ko 8Ko
Licence MIT GPL3 29$ GPL3 29$ MIT MIT MIT ? MIT
Auteur Garwih fancyapps fancyapps Lokesh Dhakar digitalia.be appleple brutal design Pavel Khoroshkov
Compatibilité IE8+ ? IE10+ IE9+ IE6+ ? IE9+ IE9+
Galerie toutes multiple multiple multiple multiple multiple multiple toutes
chgt par clavier N O O O O O O N
Vignettes N N O N N O N N

fermer par clic
hors image

O O O O O N O O
MOBILE non resp +++ Pb touch
touch chgt image N N O N N O N O
touch zoom image N N O N N O N N
Croix fermeture N O O O N O O O
Titre O O O O N O N O
Chgt auto image N N O N N N N N
Traduisible N N O N N N N N

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

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

Téléchargement

Autres articles

Support

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

Print Friendly and PDF