Avec directResize et lightbox

* pensez à vider le cache de votre navigateur entre chaque page pour faire les tests

directResize intégre également un lien vers les possibilités de zoom offertes par lightbox. Ceci ne fonctionnera qu'à condition que vous ayez lié les fichiers nécessaires à lightbox (.js et .css) à votre page.

Pour demander à directResize de s'occuper de placer un lien de ce type, il faut que le mot lightbox figure quelque part dans la balise de l'image. Par exemple, on pourrait avoir :
<img class="lightbox" src="monimage.jpg />

Une bonne idée serait de paramétrer un style spécifique dans TinyMCE (genre : zoomImage=lightbox) pour ne pas avoir à passer par le code pour placer cette balise. Il suffit alors d'aller dans les propriétés de l'image, onglet appearance et choisir la Class zoomImage :

directResize s'occupe alors pour les images à zoomer de créer un fichier aux tailles optimisées pour le zoom. La taille de zoom est spécifiée dans les paramétres du plugin. Il place ensuite autour de la balise IMG la balise A nécessaire à l'affichage du zoom lightbox.

DirectResize intègre également la possibilité de gérer la légende de votre zoom. Rentrez au choix la description et/ou le titre dans l'interface deTinyMCE et la légende du zoom sera automatiquement générée en respéctant ce design :
Description sur ligne du haut, en gras
Title sur ligne du bas, en lettres normales, en taille de police réduite

 

 

Pour illustrer l'exemple, une image sur 2 a été renseignée de cette façon. Voici donc la même série de photos avec des zooms. Vous remarquerez que la fonction de groupement des images a été activée pour permettre de faire défiler les images directement depuis Lightbox par les boutons suivant et précédents.

On peut constater que le zoom ne s'applique que sur les images désirées

Et la troisième série :