+  Jérome Bosch : Le jardin des délices  - 

On a parfois besoin de regarder en détail une image ...
Sur un terminal tactile (smartphone, tablette) cette opération est facilitée par le zoom-écran (pincer-écarter avec deux doigts) mais sur ordinateur le zoom sur image est souvent limité à l’affichage plein écran. Mais dans les deux cas on sort du contexte de l’article qui contient l’image.

J’ai donc codé un modèle-spip <imzxxx|> qui permet d’afficher une image zoomable à l’intérieur d’un cadre dont les dimensions sont proportionnelles aux dimensions de l’image : l’agrandissement se fait par deux boutons + et - placés sous le cadre de l’image.

 +  Cliquer sur + ou - pour zoomer  - 

On peut se déplacer dans l’image agrandie, par les ascenseurs du cadre (sur ordinateur) ou par glissement du doigt (sur appareil mobile).

Cérise sur le gateau ... on peut afficher plusieurs "zoom-sur-image" dans un même article spip !

Pour bénéficier de ces fonctionnalités, il faut télécharger le modèle-spip ci-dessous :

imz-html.zip

 Dézipper imz-html.zip et télécharger le modèle "imz.html" dans le répertoire "modeles" à l’intérieur de "squelettes".

Les paramètres disponibles pour ce modèle <imzxxx|> sont les suivants :
 xxx = identifiant spip de l’image jpg à afficher
 size = taille de l’image : de 0.1 à 1.0 (par défaut = 1 = 100% de la largeur de la fenêtre d’affichage - la hauteur de l’image est calculée automatiquement par le modèle <imzxxx|>)
 align = alignement de l’image : left, center ou right (par défaut = center)
 background = couleur de fond de la fenêtre de l’image et des boutons (par défaut = none - les couleurs peuvent être écrit en hexa (#123) ou en nom css (yellow, green, etc.) )
 legende = texte (en blanc) incrusté dans la barre de navigation (par défaut = Cliquer sur + ou - pour zoomer)
— si legende=1 texte incrusté=TITRE du document-image
— si legende=2 texte incrusté=DESCRIPTIF du document-image
— si legende=texte libre=texte incrusté - ATTENTION : dans les légendes ne pas utiliser le caractère ’ (guillemet simple droit) qui bloque le script d’affichage. Si nécessaire, utiliser le caractère ’ (guillemet-apostrophe).

Les deux exemples ci-dessus illustrent le fonctionnement de ce modèle :
— pour la première image : <imzxxx|background=yellowgreen|legende=Jérome Bosch : Le jardin des délices>
— pour la deuxième image : <imzyyy|size=0.75|align=left>