Ajouter une librairie LightBox à votre Site Joomla
Afin de limiter le poids de chargement d’images trop lourdes, il est possible de ne présenter que des images de faibles dimensions, dans le contenu de la page du site.
On a ensuite recours à une librairie de type Lightbox, pour en lancer un aperçu en mode diaporama, uniquement lorsque l’utilisateur le souhaite.
Par exemple, cliquez sur l’une des images de cet article. Ces types de librairies foisonnent sur le web, et il n’y a qu’à taper lightbox, ou lightview, dans Google pour le constater. Il est possible d’installer une extension à notre site Joomla pour le doter d’une telle fonctionnalité, d’autant plus que le site extensions.joomla.org en regorge.
Afin de mieux en comprendre les mécaniques, nous allons, quant à nous, procéder à une installation manuelle… en avant !
La librairie Slimbox sous Mootools
Toutes les librairies de type LightBox, ou LightView, s’appuient sur un des framework Javascript tel que Prototype, JQuery, Mootools… Il faut donc installer ces deux composants, le framework et la librairie de diaporama sur notre site, pour pouvoir mettre en application ce type de fonctionnalité.
Joomla utilise déjà Mootools pour certaines de ses fonctionnalités, nous allons donc uniquement nous concentrer sur la librairie LightBox adéquate.
Une rapide recherche avec les mots clés Lightbox et Mootools nous présente diverses possibilités. Quelle que soit celle que nous retiendrons, la démarche qui suit restera identique. Pour les besoins de cet article nous allons retenir Slimbox.
Avant de télécharger la version de Slimbox, il faut nous assurer de la version de Mootools déjà installée pour Joomla, afin d’en assurer la compatibilité.
Pour cela, il suffit d’ouvrir le fichier mootools.js présent dans le dossier media/system/js/ de votre installation. Une fois le fichier ouvert, l’information est accessible depuis la première ligne de code :
var MooTools={version:'1.11'};
Préparation et installation de la librairie Slimbox
Dans ce cas, il nous faut donc charger la version 1.58 de Slimbox. Une fois l’archive récupérée, il suffit de la décompacter et d’ouvrir le dossier racine. Celui-ci est composé de quatre dossiers et trois fichiers. Nous allons faire le marché des seuls éléments qui nous seront nécessaires.
Il est quand même conseillé de lire le fichier readme.txt ou de décortiquer l’exemple fournit, qui peuvent être bien utile pour aller plus loin. Vous pouvez également vous rendre sur la documentation en ligne qui permet de mieux explorer les possibilités qu’offre Slimbox.
Procédure
Commencez par créer un dossier que vous appellerez tout simplement ‘slimbox’ et que vous placerez à la racine de votre site Joomla, donc au même niveau que les dossiers … administrator, articles, cache… Si votre site est en local, vous pouvez le faire avec l’explorateur Windows, s’il est distant utilisez un client FTP pour cela.
Copiez dans ce dossier l’ensemble des fichiers du dossier ‘css’ et le fichier slimbox.js contenu dans le dossier ‘js’. Passons maintenant à la modification du template.
Adaptation et modification du template utilisé
Quelque soit le template que vous utilisez pour votre site, celui-ci est modifiable : rendez-vous pour cela dans le menu Extensions > Gestion des templates de votre console d’administration. Sélectionnez le template que vous utilisez et pressez le bouton Éditer.
Depuis ce nouvel écran, il est possible d’éditer le HTML, et comme l’indique la documentation de Slimbox, il va nous falloir ajouter tout simplement les deux lignes de codes qui lieront le fichier javascript et le fichier css nécessaires.
Du fait que Joomla utilise déjà Mootools, il n’est pas nécessaire de rajouter un lien vers le framework.
Une fois le code HTML affiché, il faut repérer la fin de la balise </head> et le début de la balise <body>, il est possible pour cela d’employer le module de recherche du navigateur. Nous placerons le code juste avant la fermeture de la balise </head>.
Nous pouvons user de chemin absolu pour pointer vers nos fichiers, ou alors faire appel à un fragment de PHP qui adaptera le code en fonction d’un éventuel changement de serveur. Copiez collez donc le code suivant avant la fermeture de la balise </head>.
<script type="text/javascript" src="/slimbox/slimbox.js"></script> <link rel="stylesheet" href="/slimbox/slimbox.css" type"text/css" />
Remarquez également que le nom de dossier employé est ‘/slimbox/’. Si pour votre utilisation vous avez créé un dossier ayant un autre nom, pensez de répercuter cette modification ici, dans le chemin d’accès.
Il ne vous reste plus qu’à sauvegarder cette modification et à utiliser cette nouvelle fonctionnalité depuis vos articles.
Note : Il se peut que votre service d’administration refuse la prise en compte de cette modification, car par défaut, et pour des raisons de sécurité, le fichier de template n’est pas modifiable. Il faut donc au préalable, et grâce à un client FTP modifier les droits d’accès au fichier. Passez le CHMOD du fichier index.php du template utilisé en 777 et répétez l’opération de modification du HTML.
Utilisation de la fonctionnalité depuis un article
Dorénavant, lorsque vous écrivez un article il est possible d’invoquer cette nouvelle fonctionnalité. Comme vous le précise la documentation, il est possible de réaliser l’agrandissement d’une seule image, ou alors de réaliser un véritable diaporama.
Commençons par mettre en place l’agrandissement d’une seule image. Il faut pour cela ajouter un lien à l’image présente dans le document qui pointe vers la grande image à afficher, et ajouter un attribut rel qui a pour valeur ‘lightbox’. Si vous ajouter un attribut title à votre lien, sa valeur sera utilisé comme légende.
<a href="acces_a_la_grande_image" rel="lightbox" title="la légende de l'image"> <img src="image.jpg" /> </a>
Voilà… c’est simple, non ? Slimbox vous permet très simplement de créer des diaporamas d’images en ajoutant un identifiant après le mot lightbox dans l’attribut rel… par exemple rel= »lightbox[serie] ».
Cet identifiant devant être unique pour chaque image de la même galerie, cela vous permet de créer diverses galeries au sein de la même page, par exemple rel= »lightbox[fruits] » et rel= »lightbox[légumes] ».
Conclusion
Il vous est possible d’aller bien plus loin dans l’exploitation de cette librairie, mais cela dépasserait largement le cadre de cet article. Cependant, si vous le souhaitez, vous pouvez consulter la documentation de l’API Slimbox et personnaliser ainsi encore plus votre présentation.