Les galeries d'images sont un excellent moyen d'exposer des photos pour séduire le public.
Le module externe jQuery Lightbox est une ressource gratuite qui permet de créer rapidement des galeries d'images.
Cette vidéo explique comment créer une grille d'images et utiliser le module externe Lightbox pour afficher un diaporama.
La structure du projet de galerie est simple.
Jetons un œil au panneau Fichiers.
Pour suivre le tutoriel, téléchargez et décompressez les fichiers de projet.
Je commence par sélectionner l'espace de travail Création.
Le projet inclut un dossier avec des images basse et haute résolution, le dossier du module externe Lightbox et deux fichiers, gallery.html et gallery.css.
Je vais utiliser les fichiers HTML et CSS en mode Fractionner pour configurer la galerie.
Vous voyez en mode En direct que j'ai déjà créé une grille d'images.
Si je survole une image, une légende s'affiche et l'opacité passe au maximum.
Ces éléments interactifs rendent l'exploration de la grille plus attrayante.
En mode Code, vous voyez que chaque aperçu est créé avec une balise d'ancrage et une balise div en enveloppant une autre, ainsi qu'une balise d'image.
La balise div imbriquée contient la légende.
Le mode En direct facilite l'accès au code CSS.
Sélectionnez l'image, appuyez sur la flèche Haut pour accéder à la balise div, puis cliquez avec le bouton droit sur le sélecteur et choisissez Atteindre le code.
Voici le code CSS de l'effet appliqué lors du survol d'une image, et les styles de chacun des éléments de la grille d'images.
Maintenant que vous savez configurer une grille d'images, vous pouvez facilement activer le module externe Lightbox.
Il suffit de créer des liens vers des fichiers et de configurer les balises d'ancrage.
Regardez la balise d'en-tête du fichier HTML.
J'ai déjà créé les liens vers les trois ressources nécessaires à Lightbox : jQuery, le fichier JavaScript Lightbox et le fichier CSS Lightbox.
Je vais finaliser la configuration en ajoutant des attributs aux balises d'ancrage.
Lightbox utilise des attributs de données pour identifier l'image à charger et lui attribuer un titre.
Je sélectionne la balise d'ancrage en mode En direct, puis j'appuie sur Ctrl + T ou Cmd + T pour afficher Quick Tag Editor en mode Modifier.
Pour activer Lightbox, j'ajoute les attributs data-lightbox et data-title.
Et voilà.
Il ne me reste plus qu'à mettre à jour les autres balises d'ancrage avec les attributs de données.
Désormais, l'image sera chargée dans Lightbox quand on cliquera sur l'aperçu.
À ce stade, je peux consulter mon design pour vérifier que le diaporama Lightbox fonctionne.
Je désactive un instant les sélections en mode En direct en choisissant Affichage > Options d'affichage en direct > Masquer l’affichage en direct ou en tapant Ctrl + Alt + H ou Cmd + Alt + H.
En mode En direct, je survole les aperçus et je clique dessus pour lancer Lightbox.
Pour finir, je choisis Fichier > Aperçu dans le navigateur pour jeter un œil à la page.
Il est donc très facile de configurer une belle galerie d'images avec Dreamweaver et Lightbox.
Utilisez le mode En direct pour prévisualiser, modifier et parcourir rapidement le code, et le mode Code avec Quick Tag Editor pour le paramétrage.
Essayez de créer un projet avec la même structure pour créer une galerie de portfolio en quelques étapes.
Démarrez Dreamweaver et lancez-vous !
