Si vous souhaitez afficher vos images dans une fenêtre modale dans une galerie d'image ou dans vos articles, alors ce tutoriel est exactement ce qu'il vous faut. L'idée est d'avoir une image au format "vignette" dans votre contenu et de pouvoir afficher cette image en taille "réelle" dans une fenêtre modale en cliquant sur cette vignette. Dans ce tutoriel, nous allons voir comment afficher vos images dans une fenêtre modale dans Joomla 4.

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 fenêtre modale s'ouvrira très rapidement. L'inconvénient est que c'est moins propre et que la page pourra être plus longue à charger.

Comment afficher une image dans une fenêtre modale avec Joomla 4

Dans ce tutoriel, nous allons volontairement éviter d'installer une extension tierce puisque, comme vous allez le voir, quelques lignes de code suffisent pour obtenir le résultat voulu.

Le marquage HTML

Vous devrez respecter ce marquage à chaque fois que vous souhaiterez afficher une image de la sorte.

Les classes CSS

Ces classes sont à copier/coller dans le fichier user.css ou custom.css de votre template Joomla.

Le JavaScript

Copiez/collez ce code dans le fichier user.js ou custom.js de votre template Joomla.

Résultat définitif

Si vous avez envie d'afficher vos images dans une fenêtre modale dans une galerie d'image ou dans vos articles, alors ce tutoriel est exactement ce qu'il vous faut. L'idée est d'avoir une image au format "vignette" dans votre contenu et de pouvoir afficher cette image en taille "réelle" dans une fenêtre modale en cliquant sur cette vignette. Dans ce tutoriel, nous allons voir comment afficher vos images dans une fenêtre modale dans Joomla 3.

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 fenêtre modale s'ouvrira très rapidement. L'inconvénient est que c'est moins propre et 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 :

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>
Bon à savoir c'est la syntaxe class="modal" qui permet d'obtenir le résultat escompté !

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net