Créez une galerie d’images avec Bootstrap

J’ai créé un script qui permet d’afficher une galerie d’images sur une page web de manière esthétique et responsive. C’est ce système que j’utilise sur ce site, il est super léger et très simple à mettre en place. Si vous utilisez Bootstrap, il vous suffit d’inclure un fichier JavaScript et un fichier CSS sur la page et d’afficher les miniatures de vos images, le script s’occupe du reste. Pour afficher la galerie, vous n’aurez qu’à cliquer sur une miniature. L’image correspondante s’ouvrira alors en grand et vous pourrez naviguer parmi les différentes images de la galerie. Si ce script vous intéresse, vous trouverez le lien de téléchargement, plusieurs exemples d’utilisation et même une explication sur son fonctionnement dans la suite de cet article.

Prérequis

Cette galerie d’images utilise Bootstrap, un célèbre framework CSS. Si vous ne le connaissez pas, je vous invite vivement à le découvrir, il facilite grandement la réalisation de sites responsives. Pour faire fonctionner la galerie vous aurez donc besoin de Bootstrap et de jQuery. J’ai développé le script avec la version 3.3.7 de Bootstrap et la version 1.12.4 de jQuery mais il devrait fonctionner sans problème avec d’autres versions (veillez toutefois à utiliser une version de jQuery compatible avec votre version de Bootstrap).

Le projet est hébergé sur GitHub, vous pouvez le consulter ou le télécharger directement. J’ai même fait une page d’exemple avec de jolies photos. Après avoir téléchargé l’archive, vous devez inclure les fichiers bootstrap-gallery.js et bootstrap-gallery.css aux pages sur lesquelles vous souhaitez afficher une galerie d’images. Vous venez de faire la moitié du boulot. Vous avez vu, ce n’est pas si compliqué !

Galerie simple

Pour créer votre galerie vous devez afficher les miniatures de vos images en utilisant le composant « thumbnail » de Bootstrap (j’ai choisi de faire des miniatures de 150x150px, choisissez la taille qui vous convient) :

<div class="container">   
    <div class="row">
        <div class="col-xs-3">
            <a href="images/image1.jpg" class="thumbnail">
                <img src="images/image1-thumb.jpg" alt="Image 1" />
            </a>
        </div>
        
        <div class="col-xs-3">
            <a href="images/image2.jpg" class="thumbnail">
                <img src="images/image2-thumb.jpg" alt="Image 2" />
            </a>
        </div>
        
        <div class="col-xs-3">
            <a href="images/image3.jpg" class="thumbnail">
                <img src="images/image3-thumb.jpg" alt="Image 3" />
            </a>
        </div>
        
        <div class="col-xs-3">
            <a href="images/image4.jpg" class="thumbnail">
                <img src="images/image4-thumb.jpg" alt="Image 4" />
            </a>
        </div>
    </div>
</div>

Voilà ce que ça donne :

Miniature des images

Comme vous pouvez le voir, le lien dans lequel se trouve chaque miniature doit pointer vers l’image en taille originale. L’attribut alt de la miniature doit, quant à lui, contenir le titre que vous souhaitez afficher dans la galerie. C’est tout ce que vous avez à faire ! Si vous cliquez sur une miniature, l’original s’ouvre dans une fenêtre modale :

Aperçu de la galerie d\'images

Les flèches situées à gauche et à droite de l’image permettent d’afficher l’original des miniatures suivantes et précédentes. Vous pouvez même naviguer parmi les images grâce aux touches gauche / droite du clavier. La croix permet de fermer la fenêtre (comme la touche « échap » du clavier) et le bouton situé juste à côté permet d’ouvrir l’image en taille réelle dans une nouvelle page.

Galeries multiples

Il est possible de définir plusieurs galeries sur une même page. Pour cela, vous devez renseigner un identifiant de galerie dans l’attribut data-gallery des liens :

<div class="container">   
    <h2>Galerie 1</h2>
    
    <div class="row">
        <div class="col-xs-3">
            <a href="images/image1.jpg" class="thumbnail" data-gallery="gallery1">
                <img src="images/image1-thumb.jpg" alt="Image 1" />
            </a>
        </div>
        
        <div class="col-xs-3">
            <a href="images/image2.jpg" class="thumbnail" data-gallery="gallery1">
                <img src="images/image2-thumb.jpg" alt="Image 2" />
            </a>
        </div>
    </div>
        
    <h2>Galerie 2</h2>
        
    <div class="row">
        <div class="col-xs-3">
            <a href="images/image3.jpg" class="thumbnail" data-gallery="gallery2">
                <img src="images/image3-thumb.jpg" alt="Image 3" />
            </a>
        </div>
        
        <div class="col-xs-3">
            <a href="images/image4.jpg" class="thumbnail" data-gallery="gallery2">
                <img src="images/image4-thumb.jpg" alt="Image 4" />
            </a>
        </div>
    </div>
</div>

Dans ce cas, lorsqu’une galerie est ouverte, vous pouvez naviguer parmi les images dont le lien porte le même attribut data-gallery.

Liens

Vous pouvez aussi déclencher l’ouverture de la galerie grâce à un simple lien pointant vers l’image à afficher :

<a href="images/image1.jpg" class="show-gallery" title="Mon titre">Lien avec titre</a>

Le titre affiché dans la galerie sera alors celui qui est défini dans l’attribut title du lien. Si le lien ne possède pas cet attribut, le titre affiché sera celui qui a été défini dans l’attribut alt d’une miniature dont le lien pointe vers la même image. Vous suivez ? Voici un exemple :

<div class="container">   
    <div class="row">
        <div class="col-xs-4 col-xs-offset-4">
            <a href="images/image1.jpg" class="thumbnail">
                <img src="images/image1-thumb.jpg" alt="Image 1" />
            </a>
        </div>
    </div>

    <p><a href="images/image1.jpg" class="show-gallery">Lien sans titre</a></p>  
</div>

S’il n’y a pas de miniature dont le lien pointe vers la même image, le titre affiché sera celui qui est défini dans l’attribut alt de l’image en taille réelle, si elle est affichée sur la page :

<img src="images/image1.jpg" alt="Image 1" style="width: 100%" />
<a href="images/image1.jpg" class="show-gallery">Lien sans titre</a>

Et si aucun titre n’est trouvé ? Il n’y a pas de miracle, aucun titre ne sera affiché.

Sélecteurs personnalisés

Je pense que vous l’avez compris, les classes CSS qui déclenchent l’ouverture de la galerie sont thumbnail et show-gallery. Cependant, vous pouvez ajouter vos propres sélecteurs CSS :

<a href="images/image1.jpg" class="custom-selector" title="Lien avec un sélecteur CSS personnalisé">Lien</a>

<script type="text/javascript">
$(document).ready(function() {
    $('a.custom-selector').bootstrapGallery();
});
</script>

Fonctionnement

Voici quelques détails pour ceux qui veulent comprendre comment ça marche. Comme vous pourrez le constater, le fichier CSS ne contient que très peu de lignes. C’est normal, tous les composants utilisés sont des composants Bootstrap : la fenêtre modale, les flèches du carousel et même les icônes. Tous les styles et certaines interactions (ouverture / fermeture de la fenêtre modale) sont donc définis par Bootstrap. Je vous avais dit que c’était un framework CSS merveilleux !

Si vous regardez un peu le contenu du script vous verrez qu’il n’y a rien de compliqué, toute la « difficulté » est de trouver :

  • L’URL de l’image à afficher : elle est donnée par le lien qui a été cliqué.
  • Le titre à inclure dans l’en-tête de la fenêtre modale : il est défini soit dans l’attribut alt de la miniature, soit dans l’attribut title du lien, soit dans l’attribut alt d’une miniature dont le lien pointe vers la même image, soit dans l’attribut alt de l’image originale affichée sur la page.
  • L’URL des images suivantes et précédentes : pour les obtenir, il suffit de chercher les liens portant le même attribut data-gallery que celui qui a été utilisé pour ouvrir la galerie et de trouver ceux qui sont situés avant et après celui qui a été cliqué.

Vous savez tout maintenant ! Comme d’habitude, si vous avez des remarques à faire ou des améliorations à apporter au script, vous pouvez laisser un commentaire, m’envoyer un mail ou faire un pull request sur GitHub.

Mise à jour du 08/09/2016 : Publication de la version 1.1

_ Il est maintenant possible de définir plusieurs galeries sur une même page en utilisant l’attribut data-gallery.

_ Lorsqu’une image a une taille inférieure à la taille de la fenêtre modale, cette dernière s’adapte pour pas que l’image ne soit agrandie (merci Marc-Etienne pour la remarque).

_ Vous pouvez dorénavant définir de nouveaux sélecteurs CSS qui permettront d’ouvrir la galerie.

Commentaires

Anaïs - Il y a 10 mois

bonsoir, question certainement bête venant d’une débutante.
« Après avoir téléchargé l’archive, il suffit d’inclure les fichiers « bootstrap-gallery.js » et « bootstrap-gallery.css » aux pages sur lesquelles vous souhaitez afficher une galerie d’images.  »

De quelle manière ? Avec un « include » en php ?

Bonne soirée

Ludovic - Il y a 10 mois

Bonsoir Anaïs ! En fait il faut juste insérer les fichiers en HTML :
_ Le CSS :

<link rel="stylesheet" href="bootstrap-gallery.css">

_ Le JavaScript :

<script src="bootstrap-gallery.js"></script>

N’hésite pas à regarder le code source du fichier d’exemple. Bon courage, tiens-moi au courant !

Marc-Etienne - Il y a 10 mois

Bonjour, félicitation pour cette galerie, j’avais exactement besoin de cela. J’ai une petite question : certaines photos de la galerie sont assez petites, et comme la page modale prend ses dimensions par rapport à la fenêtre, mes photos apparaissent floues. Malheureusement je n’ai pas ces photos en meilleures qualités.
Auriez vous une idée pour que la taille de la fenêtre modale s’adapte au contenu avec par exemple un max-width à 100 % au cas où elles soient plus grosses ?
Merci !

Ludovic - Il y a 10 mois

Bonjour Marc-Etienne, je m’apprêtais justement à publier une nouvelle version du script. J’en ai profité pour faire en sorte que la taille de l’image ne dépasse jamais sa taille originale.
Je viens de mettre à jour l’article, tu peux dès à présent télécharger la nouvelle version du script et profiter de cette évolution 😉
Merci pour ton commentaire !

Marc-Etienne - Il y a 10 mois

Whaou ! ça c’est du rapide, bravo !
Par contre j’ai du faire un truc qui ne va pas, j’ai remplacé les contenus des deux fichiers par la nouvelle version, et cela ne fonctionne plus, pourtant firebug ne m’affiche aucune erreur !
Les liens pointent vers l’image dans l’onglet, au lieu d’ouvrir une fenêtre modale

Ludovic - Il y a 10 mois

Non, tu as bien fait ! J’ai décidé par erreur de ne plus initialiser la galerie dans le script. En attendant que je corrige ça, tu dois ajouter les quelques lignes de JavaScript qui se trouvent tout en bas de l’article.

Marc-Etienne - Il y a 10 mois

Purée je suis un crétin, je n’avais pas vu l’ajout en bas de l’article, et en lisant le code je n’ai pas vu que ce n’était pas initialisé… Faut il se trouver bête …
Bon alors puisque j’ai déjà l’air bête, je continue 🙂 Ca ne fonctionne pas, j’obtiens cette erreur dans la console :
a.indexOf is not a function

Ludovic - Il y a 10 mois

Je viens de publier la release finale de la version 1.1. J’ai rajouté l’initialisation automatique, tu peux donc enlever les deux lignes de code que tu as ajouté. Tu ne devrais plus avoir de problèmes à présent !

Anaïs - Il y a 10 mois

Merci beaucoup, c’est super simple en fait ! Cependant, le « lien » de la miniature est beaucoup plus grand que la miniature, un grand cadre blanc apparait donc. Comment l’adapter ?
De plus sur l’affichage complet, je n’ai pas les flèches pour changer d’image ou même la croix pour fermer, est ce normal ?

Ludovic - Il y a 10 mois

Les liens qui portent la classe thumbnail utilisent par défaut tout l’espace disponible, tu dois ajuster la taille de leur bloc parent. Tu peux aller voir l’exemple qui est donné sur le site de Bootstrap. Ou alors, tu peux ajouter ce code CSS pour que la miniature occupe 100% de la largeur du lien :

a.thumbnail img {
	width: 100%;
}

Pour ton second problème, il semble que tu aies un problème avec la police glyphicons qui est utilisée par Bootstrap pour afficher les différentes icônes.

Arnaud - Il y a 6 mois

Bonne explication!
Merci beaucoup 🙂

Ludovic - Il y a 6 mois

C’est toujours un plaisir ! Bon développement 😉

Raul - Il y a 4 mois

Bonjour, merci pour ta contribution. J’ai 100 images que j’ai placé par ligne de 4 et puis tout marche bien; j’utilise php pour faire les petites images, ma question est: Étant donné que j’ai beaucoup d’images est-ce que c’est possible de faire la pagination des petites images?
Merci.
Cordialement .

Ludovic - Il y a 4 mois

Bonjour ! Je suis ravi de voir que mon script répond à ton besoin 🙂

C’est tout à fait possible d’ajouter la pagination. Tu peux le faire de différentes manières :
_ En JavaScript, l’inconvénient étant que tes 100 images seront chargées à l’ouverture de la page, même celles qui ne sont pas affichées.
_ Directement en PHP en te basant sur une variable de l’URL pour afficher les images correspondantes à la page demandée (exemple : mapage.php?pagination=2)

Pour ces deux solutions, tu trouveras de nombreux exemples sur ton moteur de recherche préféré. Bon courage !

Aimée - Il y a 3 mois

Bonjour,
Chez moi la galerie ne fonctionne pas… J’ai bien mis le link dans le head pour le css ainsi que le script, et avant la fermeture du body j’ai mis tes quelques lignes d’initialisation…

Ludovic - Il y a 3 mois

Bonjour Aimée,

Quel navigateur utilises-tu ? As-tu regardé dans la console s’il y avait des messages d’erreur ? N’hésite pas à comparer ce que tu as fait avec la page d’exemple disponible sur GitHub.

Tiens-moi au courant.

Rayane - Il y a 3 mois

Bonjour,
Tout d’abord merci pour toutes ces explications.
Toutefois j’aimerai savoir comment vous avez fait pour que toutes vos miniatures soient exactement de la même taille. Etant donné que les miennes ont des tailles qui ne sont pas identiques.

Ludovic - Il y a 3 mois

Bonjour Rayane,

C’est WordPress qui me génère les miniatures pour chaque image que je mets en ligne. Ces miniatures font toujours la même taille (150px x 150px), peu importe la taille de mon image d’origine. Si tu n’utilises pas WordPress, c’est à toi de créer ces miniatures avec une taille fixe grâce le logiciel d’édition d’image de ton choix 😉

Ludovic

Rayane - Il y a 3 mois

Merci pour votre réponse Ludovic 🙂


Vous avez aimé cet article ? Dites-le !