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.
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 redimensionnerL'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.
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 redimensionnerL'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.
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>class="modal" qui permet d'obtenir le résultat escompté !