Vidéo: How to Add Image Lightbox to WordPress Using Elementor 2025
Des groupes d'images peuvent être présentés sur le web de différentes façons. Il y a des galeries, des curseurs et des visionneuses d'images Lightbox, qui peuvent tous être construites de manière illimitée. Par exemple, les visionneuses d'images peuvent être construites en utilisant une combinaison de HTML, CSS, JavaScript, jQuery, ou même Flash.
Bien que la meilleure solution soit conforme aux normes et ait un faible encombrement d'environ 25K ou moins, la bonne solution dépend souvent des besoins spécifiques du site Web.
Pour illustrer, supposons que vous concevez un site pour un artiste qui veut avoir une page de portfolio avec huit petites images organisées en une grille, et quand vous cliquez sur l'une des plus petites images, une plus grande la version s'affichera à l'écran. L'une des meilleures solutions pour ce type de besoin est la visionneuse d'images Lightbox2.
En plus d'être l'un des visionneurs d'images les plus populaires aujourd'hui, il est également léger et très facile à installer.
La visionneuse d'images Lightbox2 fonctionne mieux lorsque vous avez deux séries d'images. Le premier ensemble correspond aux images miniatures plus petites qui apparaissent lorsque la page s'ouvre dans le navigateur, et la deuxième série correspond aux plus grandes images visibles via le widget Lightbox2.
Les étapes suivantes montrent à quel point il est facile d'ajouter la visionneuse d'images Lightbox2 à une page Web:
-
Visitez le site Web de Lightbox2 et téléchargez une copie des fichiers Lightbox2.
Le fichier Zip Lightbox contient plusieurs fichiers, y compris un exemple de fichier nommé index. html, un dossier avec deux fichiers JavaScript, un dossier avec un fichier CSS et un dossier images avec toutes les images utilisées dans l'afficheur d'images Lightbox2. Copiez le contenu extrait de ce fichier Zip dans votre dossier de site géré Lightbox.
-
(Facultatif) Si vous utilisez Dreamweaver, créez un site géré dans un nouveau dossier sur votre ordinateur appelé Lightbox.
Choisissez Site → Nouveau site pour créer un nouveau site géré dans le nouveau dossier Lightbox. Dans le champ Nom du site, entrez le nom Lightbox et, dans le champ Dossier du site local, recherchez et sélectionnez le nouveau dossier Lightbox.
-
Ouvrez le fichier appelé lightbox. html dans Dreamweaver ou dans votre éditeur web préféré.
La mise en page de ce fichier comprend un tableau rempli de huit images miniatures, prêt à ajouter le code Lightbox2.
-
Ajoutez les liens suivants aux fichiers JavaScript et CSS à votre code:
Ces liens appellent les fichiers appropriés qui aident à rendre la fonction Lightbox.
-
Convertissez chacune des vignettes en liens hypertexte pointant vers leurs images en gros plan respectives et incluez l'attribut rel = "lightbox [mygroup]" qui active Lightbox.
Veillez à remplacer mygroup par un nom descriptif pour votre groupe d'images.
Par exemple, modifiez le code de la première image à partir de ceci:
À ceci, où la vignette est liée au gros plan:
-
(Facultatif) Si vous souhaitez inclure une légende dans vos images, ajoutez l'attribut title de l'étiquette de lien, comme indiqué ici:
-
Répétez les étapes 5 et 6 pour les images restantes dans le tableau.
Si vous le souhaitez, associez les titres de vos images agrandis au texte alternatif de leurs images miniatures respectives.
-
Enregistrez votre fichier et prévisualisez la visionneuse d'images Lightbox2 en lançant la page dans votre navigateur préféré.
Cliquez sur l'une des vignettes pour voir comment fonctionne la Lightbox2. Vous devriez voir la page du navigateur s'affaiblir lorsqu'une fenêtre pop-up apparaît au-dessus et afficher l'image en gros plan de la vignette sur laquelle vous avez cliqué.
-
Avec l'image en gros plan sur votre écran, passez votre souris dessus pour voir une flèche de navigation gauche ou blanche apparaître sur le dessus de l'image en gros plan.
Cliquez sur le côté gauche ou droit de l'image pour passer d'une image rapprochée à la suivante. Sous le gros plan, vous devriez également voir le titre de l'image ainsi que le nombre actuel et total d'images dans l'ensemble (comme Not in Kansas, Image 5 sur 8) et un gros X sur lequel vous pouvez cliquer pour fermer la visionneuse et revenez à la fenêtre du navigateur parent.
Si, pour une raison quelconque, votre visionneuse d'images Lightbox ne fonctionne pas correctement, répétez les étapes pour vérifier que vous avez correctement ajouté tous les liens. Pour obtenir de l'aide supplémentaire, visitez le forum Lightbox2.
