Tutoriel Logo Joomla Joomla

Afficher vos images dans un fenêtre modale

Ce tutoriel vous explique comment afficher très facilement vos images dans une popup de type modale dans une galerie d'image ou dans vos articles. L'idée est d'avoir une image au format "vignette" dans votre contenu et de pouvoir l'afficher en taille "réelle" dans une popup modale en cliquant sur cette vignette.

Table des matières
- Etape 1 : Ajouter le code
- Etape 2 : Mise en oeuvre

 

Note : Plutôt que d'utiliser une vignette et une image (donc, 2 fichiers distincts), vous pouvez n'utiliser que l'image en taille réelle et indiquer sa hauteur et sa largeur dans la balise img pour la redimensionner
L'avantage est que votre popup s'ouvrira très rapidement. inconvénient est que la page pourra être plus longue à charger.

 

Etape 1 : Ajouter le code

Nous allons ajouter une simple ligne de code dans le fichier "index.php" de votre template.

Ouvrez votre client FTP et ouvrez le dossier "Template/Nom_de_votre_template" pour y trouver le fichier "index.php". Téléchargez-le sur votre ordinateur.

Ouvrez le fichier avec votre éditeur de texte et repérez la ligne contenant defined('_JEXEC') or die;,
Juste après celle-ci, ajoutez le code suivant :

<?php JHTML::_( 'behavior.modal' ); ?>

Enregistrez votre saisie et renvoyez votre fichier "index.php" sur le serveur avec votre client FTP.

Image modale Joomla

 

Etape 2 : Mise en oeuvre

Pour mettre en oeuvre cette fonction, utilisez maintenant cette syntaxe dans votre contenu :

<a class="modal" href="/images/stories/mon_image.jpg">
<img src="/images/stories/mon_image.jpg" border="0" alt="" width="" height="" /></a>

Important : c'est la class="modal" qui permet d'obtenir le résultat escompté.