MyZoomBox - Afficher ses images sur PluXml avec une lightbox

Depuis quelque temps, j'essaie de faciliter la lecture du contenu sur le site. J'ai fait quelques modifications sur le CSS du site et introduit Font Awesome. Ensuite, j'ai décidé d'améliorer la consultation des articles et principalement les images. La visualisation des images en miniature est plus intuitive, on reste désormais sur la même page et avec la possibilité de consulter plusieurs images sous forme de galeries.

J'ai donc cherché des solutions faciles à utiliser et pas intrusif: ZoomBox et son plugin MyZoomBox pour PluXml semble remplir les critères.

Installation

Pour commencer, on récupère l'archive de MyZoomBox sur Pluxopolis.

On décompresse l'archive .zip (on pense à renommer le dossier pour supprimer le numéro de version) et on l'envoie sur le FTP dans le dossier /plugins/ de PluXml.

Depuis l'administration: Paramètres > Plugins puis Plugins inactifs, on sélectionne le plugin plxZoombox et avec le menu déroulant on choisit Activer et valide la modification en cliquant sur OK.

Le plugin MyZoomBox est maintenant activé sur votre site PluXml.

Utilisation

Pour utiliser Zoombox il faut simplement ajouter class="zoombox" dans le lien.

Initialement, pour une image on a:

<a  href="data/images/0001/pluxml.png"><img src="data/images/0001/pluxml.tb.png" alt="" /></a>

Pour visualiser l'image avec Zoombox, on ajoute class="zoombox":

<a class="zoombox" href="data/images/0001/pluxml.png"><img src="data/images/0001/pluxml.tb.png" alt="" /></a>

Pour ajouter un titre à l'image, on ajoute title="Titre de la photo":

<a title="Titre de la photo" class="zoombox" href="data/images/0001/pluxml.png"><img src="data/images/0001/pluxml.tb.png" alt="" /></a>

On peut ajouter une galerie d'image avec class="zoombox zgallery1" :

<a class="zoombox zgallery1" href="data/images/0001/pluxml.png"><img src="data/images/0001/pluxml.tb.png" alt="" /></a>

Pour créer plusieurs galeries on remplacera zgallery1 par zgallery2, zgallery3, etc. C'est plutôt simple.

Ça marche également avec un lien vers un site web:

<a href="http://www.pluxml.org/" class="zoombox">PluXml</a>

et on peut définir la taille de la page en rajoutant class="zoombox w800 h600":

<a href="http://www.pluxml.org/" class="zoombox w800 h600" >PluXml</a>

Configuration du plugin

Il existe quelques paramètres disponibles pour plxZoombox.
Pour les modifier les paramètres, se rendre dans le menu: Paramètres > Plugins puis Configuration de plxZoombox.

• Modification du thème,
• Durée de l'animation,
• Dimension,
• Autoriser les galeries avec des miniatures (à désactiver si le chargement est trop long),
• Démarrage automatique des vidéos.

Zoombox et plxToolbar

Sur PluXml j'utilise simplement plxToolbar car j'ai pas besoin de plus (je rédige principalement en Markdown).
En utilisant plxToolbar, on doit éditer chacune des images à la main. Je propose de gagner du temps en automatisant tout ça.

Pour ce faire, on va éditer le fichier /plugins/plxtoolbar/medias.php dans votre dossier PluXml.

On remplace la ligne 166:

return alignStart+'<a href="'+basename(p_href)+'"'+p_title+p_rel+p_class+'><img src="'+basename(p_src)+'" alt="" /></a>'+alignEnd;

par:

return alignStart+'<a href="'+basename(p_href)+'"'+p_title+p_rel+p_class+' class="zoombox" ><img src="'+basename(p_src)+'" alt="" /></a>'+alignEnd;

On peut également ajouter une gallerie automatique en remplaçant class="zoombox" par class="zoombox zgallery1" .

C'est déjà fini et même pas besoin de modifier ses habitudes pour profiter de Zoombox.

Ressources

• Zoombox
• MyZoomBox