Aujourd'hui, je vous présente un petit plugin que j'ai écrit moi-même, dont le rôle et de créer une fenêtre modale, entièrement pure CSS.
Ce petit plugin ne répond à un besoin professionnel, fort difficile à trouver, où je dois afficher une galerie d'images, et pour chaque d'entre elles en cliquant sur celle-ci, l'image doit s'afficher en grand.
Mon plugin va donc beaucoup plus loin que d'afficher une fenêtre modale, puisqu'il prend en paramètre un répertoire complet de cette manielre :
{GMLB}/images/sampledata/fruitshop{/GMLB}
.Dans le répertoire que vous spécifiez entre les balises, vous pourrez bien entendu placez vos fichiers ou différents formats graphiques que votre navigateur sais lire, mais en plus, pour chacun des fichioer, en reprenant exactement le nom du fichier, extension comprise, auquel vous pourrez concatener l'extension .txt ( ce qui donne par exemple
apple.jpg.txt
pour le fichier graphique apple.jpg
), vous pourrez spécifier la légende de vos images, en HTML, avec des <span> par exemple. C'est la raison pour laquelle se trouve le fichier custom_style.css
où vous pouvez rajouter vos styles. Ce fichier est facultatif, et s'il est absent, le code gère son absence sans provoquer de bugs.Dans le cas où vous avez besoin de ce fichier CSS de customisation, vous devez le placer dans le répertoire de mon plugin. En l'occurrence ici, modallightbox.
C'est quoi encore ce plugin ?
Si vous êtes un utilisateur courant de Joomla, vous devez sûrement connaître l'extension modals de regular labs dans sa version gratuite.
Cet outil est véritablement très pratique, mais je me heurte à une problématique très simple, dans sa version gratuite évidemment, (je rappelle que je n'ai aucun budget pour mon projet), certains éléments n'étaient pas facilement affichables dans une galerie d'images. Et surtout, pas comme nous voulions.
En effet, nous voulions avoir une simple galerie d'images sous la forme d'un "tableau" d'images, et lorsque nous cliquons sur une image, nous devons afficher cette dernière dans une fenêtre modale d'une part, mais en plus, nous devons impérativement pouvoir intégrer une légende qui peut être relativement complexe. En effet, comme nous sommes dans le cadre de documentation technique, nous nous adressons à des techniciens, de ce fait nous avons parfois besoin de longues légende à nos images.
L'utilisation et le fonctionnement de ce plugin.
Pour appeler mon plugin, j'utilise tout simplement et à commande suivante : (notez que nous spécifions entre les short code, uniquement le chemin relatif par rapport au répertoire de Joe moulin, dans lequel se trouve les images)
{GMLB}/images/sampledata/ fruitshop{/GMLB}
si ce dossier comporte par exemple le fichier image1.jpg, vous pouvez au même niveau que l'image, spécifier le fichier texte
image1.jpg.txt
avec à l'intérieur, du texte ou du html simple pour spécifier la légende de l'image. Si vous créez dans le dossier du plugin le fichier custom_style.css
, pour pourrez y spécifier vos propres styles CSS.À titre informatif, mes codes cours que j'utilise ici, signifie simplement global modale light box tout simplement.
Cet outil va alors parcourir le répertoire que vous avez spécifié entre les deux balises, afin d'afficher une galerie d'images, et pour chacune des images affichées, une fenêtre modale s'ouvrira avec en grand, l'image désirée.