image-magnify ~ voir les détails d'une photo

Un effet de loupe pour voir les détails d'une photo

🆙 image_magnify : affiche un effet de loupe sur une image *

Cliquer pour lire la documentation

syntaxe 1 {up image-magnify=petite image | imgzoom=grande image pour zoom}
syntaxe 2 {up image-magnify=image pour vignette et zoom}
@author: LOMART @version: UP-0.9 @license: GNU/GPLv3 @credit: thdoan @tags: image
  • image_magnify: fichier image normale
  • imgzoom: fichier image utilisé pour le zoom. si vide: image principale

Paramètres de la loupe

  • size: diamètre de la loupe en pixel
  • radius: taille de l'arrondi de la loupe en pixel
  • border: modele de bordure pour la loupe. fin ou vide

Style CSS

  • class: classe(s) ajoutées au bloc principal
  • style: style inline ajouté au bloc principal
  • id: id genérée automatiquement par UP

Un simple exemple

Avec ce simple shortcode, on obtient ce résultat :

{up image-magnify=images/photos/Basilique-Saint-Pierre-Vatican-mini.jpg 
  | imgzoom=images/photos/Basilique-Saint-Pierre-Vatican.jpg}

Survoler l'image avec votre curseur pour voir l'effet

Encore plus simple

Version 1.8 on indique uniquement le chemin vers la grande photo

{up image-magnify=images/photos/Basilique-Saint-Pierre-Vatican.jpg}

Cette méthode présente plusieurs avantages :

  • chargement d'une seule image
  • inutile de créer et d'indiquer dans le shortcode 2 versions de l'images
  • la petite image aura toujours une bonne qualité quelque soit sa taille affichée

Avec quelques paramètres

{up 
  image-magnify = images/photos-2/Kenya-Cheetah-Masai-Mara-nb-mini.jpg
  | imgzoom = images/photos-2/Kenya-Cheetah-Masai-Mara.jpg
  | size=200
  | radius=30%
  | border=fin
}

size est la taille de la loupe, radius son arrondi et border, le style de la loupe

Nous utilisons l'option imgzoom pour  la grande image en couleur et image-magnify pour sa version en noir et blanc.

Survoler l'image avec votre curseur pour voir l'effet

version 1.8

  • Si l'option imgzoom n'est pas renseignée, l'action utilisera l'image de l'option principale image-magnify.
  • filter : exécute l'action dans certaines conditions. 🆙 Filter : liste des conditions

Crédit image : bigcatfacts.net/cheetah

Détails