Tutoriel Joomla! : Utiliser Squeezebox

• • Joomla
  • Tutoriels
• Guillaume

C’est joli une lightbox ! En plus c’est natif dans Joomla! 2.5. Alors profitez-en !

Joomla!, MooTools… et Squeezebox

Le système de lightbox (« Squeezebox ») natif de Joomla! est très facile à utiliser ! Il vous permet de mettre en place rapidement et en toute simplicité une très jolie alternative aux pop-ups sur votre site, et ce pour les contenus internes ET externes.

Et le mieux dans tout ça ? C’est que vous n’avez besoin d’aucune connaissance technique !
Allez je vous montre 😉

Activer Squeezebox…

Pour pouvoir utiliser Squeezebox, il suffit d’appeler une simple ligne de code dans le fichier « index.php » de votre template.

JHTML::_('behavior.modal');

Ce simple appel, indique à Joomla! qu’il doit charger les fichiers « modal.js » et « modal.css », et attacher un événement aux liens utilisant la classe « modal ».

…et l’utiliser

Tout ce que vous avez à faire à présent c’est de créer, n’importe où sur votre site, un lien avec la classe « modal » comme ceci :

Pour une image :

<a class="modal" href="http://www.monsite.com/image.jpg">Mon lien</a>

Pour un contenu de la page :

<a class="modal" href="#id_de_mon_contenu">Mon lien</a>

Pour une page externe :

<a class="modal" href="http://www.siteexterne.com/" rel="{handler:'iframe'}">Mon lien</a>

Avec ou sans paramètres supplémentaires

Plusieurs paramètres supplémentaires sont disponibles afin de vous permettre d’ajuster au mieux votre Squeezbox.

Ces paramètres sont tous à indiquer dans l’attribut rel du lien.

Exemple

rel="{handler: 'iframe', size: {x: 575, y: 300}}"

Les différents paramètres possibles sont les suivants :

handler :

• ‘image’ – Indique que la lightbox affichera une image

• ‘iframe’ – Indique que la lightbox affichera une iframe (url externe)

• ‘adopt’ – Indique que la lightbox affichera un élément de la page courante

• ‘url’ – Indique que la lightbox affichera une url interne du site

Paramètres optionnels :

• size : {x: 575, y: 300} – soit x la largeur et y la hauteur de la lightbox

• classWindow : ‘maClasse’ – une classe CSS qui sera attribuée à la lightbox afin de la personnaliser

• classOverlay: ‘maClasse’ – une class CSS qui sera attribuée à l’overlay afin de le personnaliser

• …

Pour connaître toutes les options, consultez le fichier /media/system/js/modal.js.

Pour conclure…

On en revient au début de cet article : une lightbox c’est esthétique, pratique et, avec Joomla!, c’est facile à mettre en place ! Alors pourquoi s’en priver ?