Gallery

Options

Classe Description
.gallery Créer une galerie d'images.
.galleryLoading Permet de charger la page puis d'afficher les images une à une.

Exemples

Galerie simple

<div class="gallery">
    <img src="https://loremflickr.com/1920/1080/all?random=1" data-caption="Image 1">
        <img src="https://loremflickr.com/1080/1920/all?random=2" data-caption="Image 2">
        <img src="https://loremflickr.com/1080/1920/all?random=3" data-caption="Image 3">
        <img src="https://loremflickr.com/1920/1080/all?random=4" data-caption="Image 4">
        <img src="https://loremflickr.com/1080/1920/all?random=5" data-caption="Image 5">
        <img src="https://loremflickr.com/1080/1920/all?random=6" data-caption="Image 6">
        <img src="https://loremflickr.com/1080/1920/all?random=7" data-caption="Image 7">
        <img src="https://loremflickr.com/1080/1920/all?random=8" data-caption="Image 8">
        <img src="https://loremflickr.com/1080/1920/all?random=9" data-caption="Image 9">
        <img src="https://loremflickr.com/1080/1920/all?random=10" data-caption="Image 10">
        <img src="https://loremflickr.com/1920/1080/all?random=11" data-caption="Image 11">
        <img src="https://loremflickr.com/1080/1920/all?random=12" data-caption="Image 12">
        <img src="https://loremflickr.com/1080/1920/all?random=13" data-caption="Image 13">
        <img src="https://loremflickr.com/1080/1920/all?random=14" data-caption="Image 14">
        <img src="https://loremflickr.com/1080/1920/all?random=15" data-caption="Image 15">
        <img src="https://loremflickr.com/1080/1920/all?random=16" data-caption="Image 16">
        <img src="https://loremflickr.com/1080/1920/all?random=17" data-caption="Image 17">
        <img src="https://loremflickr.com/1080/1920/all?random=18" data-caption="Image 18">
        <img src="https://loremflickr.com/1080/1920/all?random=19" data-caption="Image 19">
        <img src="https://loremflickr.com/1920/1080/all?random=20" data-caption="Image 20">
    </div>

Galerie avec miniatures

<div class="gallery">
    <img src="https://loremflickr.com/240/320/all?random=1" data-src="https://loremflickr.com/1080/1920/all?random=1" data-caption="Image 1">
        <img src="https://loremflickr.com/240/320/all?random=2" data-src="https://loremflickr.com/1080/1920/all?random=2" data-caption="Image 2">
        <img src="https://loremflickr.com/320/240/all?random=3" data-src="https://loremflickr.com/1920/1080/all?random=3" data-caption="Image 3">
        <img src="https://loremflickr.com/240/320/all?random=4" data-src="https://loremflickr.com/1080/1920/all?random=4" data-caption="Image 4">
        <img src="https://loremflickr.com/320/240/all?random=5" data-src="https://loremflickr.com/1920/1080/all?random=5" data-caption="Image 5">
        <img src="https://loremflickr.com/240/320/all?random=6" data-src="https://loremflickr.com/1080/1920/all?random=6" data-caption="Image 6">
        <img src="https://loremflickr.com/240/320/all?random=7" data-src="https://loremflickr.com/1080/1920/all?random=7" data-caption="Image 7">
        <img src="https://loremflickr.com/240/320/all?random=8" data-src="https://loremflickr.com/1080/1920/all?random=8" data-caption="Image 8">
        <img src="https://loremflickr.com/320/240/all?random=9" data-src="https://loremflickr.com/1920/1080/all?random=9" data-caption="Image 9">
        <img src="https://loremflickr.com/240/320/all?random=10" data-src="https://loremflickr.com/1080/1920/all?random=10" data-caption="Image 10">
        <img src="https://loremflickr.com/320/240/all?random=11" data-src="https://loremflickr.com/1920/1080/all?random=11" data-caption="Image 11">
        <img src="https://loremflickr.com/240/320/all?random=12" data-src="https://loremflickr.com/1080/1920/all?random=12" data-caption="Image 12">
        <img src="https://loremflickr.com/320/240/all?random=13" data-src="https://loremflickr.com/1920/1080/all?random=13" data-caption="Image 13">
        <img src="https://loremflickr.com/320/240/all?random=14" data-src="https://loremflickr.com/1920/1080/all?random=14" data-caption="Image 14">
        <img src="https://loremflickr.com/240/320/all?random=15" data-src="https://loremflickr.com/1080/1920/all?random=15" data-caption="Image 15">
        <img src="https://loremflickr.com/320/240/all?random=16" data-src="https://loremflickr.com/1920/1080/all?random=16" data-caption="Image 16">
        <img src="https://loremflickr.com/240/320/all?random=17" data-src="https://loremflickr.com/1080/1920/all?random=17" data-caption="Image 17">
        <img src="https://loremflickr.com/240/320/all?random=18" data-src="https://loremflickr.com/1080/1920/all?random=18" data-caption="Image 18">
        <img src="https://loremflickr.com/240/320/all?random=19" data-src="https://loremflickr.com/1080/1920/all?random=19" data-caption="Image 19">
        <img src="https://loremflickr.com/320/240/all?random=20" data-src="https://loremflickr.com/1920/1080/all?random=20" data-caption="Image 20">
    </div>

Galerie avec chargement et miniatures

<div class="gallery galleryLoading">
    <img data-thumb="https://loremflickr.com/320/240/all?random=1" data-src="https://loremflickr.com/1920/1080/all?random=1" data-caption="Image 1">
        <img data-thumb="https://loremflickr.com/320/240/all?random=2" data-src="https://loremflickr.com/1920/1080/all?random=2" data-caption="Image 2">
        <img data-thumb="https://loremflickr.com/240/320/all?random=3" data-src="https://loremflickr.com/1080/1920/all?random=3" data-caption="Image 3">
        <img data-thumb="https://loremflickr.com/240/320/all?random=4" data-src="https://loremflickr.com/1080/1920/all?random=4" data-caption="Image 4">
        <img data-thumb="https://loremflickr.com/240/320/all?random=5" data-src="https://loremflickr.com/1080/1920/all?random=5" data-caption="Image 5">
        <img data-thumb="https://loremflickr.com/320/240/all?random=6" data-src="https://loremflickr.com/1920/1080/all?random=6" data-caption="Image 6">
        <img data-thumb="https://loremflickr.com/320/240/all?random=7" data-src="https://loremflickr.com/1920/1080/all?random=7" data-caption="Image 7">
        <img data-thumb="https://loremflickr.com/240/320/all?random=8" data-src="https://loremflickr.com/1080/1920/all?random=8" data-caption="Image 8">
        <img data-thumb="https://loremflickr.com/320/240/all?random=9" data-src="https://loremflickr.com/1920/1080/all?random=9" data-caption="Image 9">
        <img data-thumb="https://loremflickr.com/240/320/all?random=10" data-src="https://loremflickr.com/1080/1920/all?random=10" data-caption="Image 10">
        <img data-thumb="https://loremflickr.com/240/320/all?random=11" data-src="https://loremflickr.com/1080/1920/all?random=11" data-caption="Image 11">
        <img data-thumb="https://loremflickr.com/240/320/all?random=12" data-src="https://loremflickr.com/1080/1920/all?random=12" data-caption="Image 12">
        <img data-thumb="https://loremflickr.com/240/320/all?random=13" data-src="https://loremflickr.com/1080/1920/all?random=13" data-caption="Image 13">
        <img data-thumb="https://loremflickr.com/240/320/all?random=14" data-src="https://loremflickr.com/1080/1920/all?random=14" data-caption="Image 14">
        <img data-thumb="https://loremflickr.com/240/320/all?random=15" data-src="https://loremflickr.com/1080/1920/all?random=15" data-caption="Image 15">
        <img data-thumb="https://loremflickr.com/320/240/all?random=16" data-src="https://loremflickr.com/1920/1080/all?random=16" data-caption="Image 16">
        <img data-thumb="https://loremflickr.com/320/240/all?random=17" data-src="https://loremflickr.com/1920/1080/all?random=17" data-caption="Image 17">
        <img data-thumb="https://loremflickr.com/320/240/all?random=18" data-src="https://loremflickr.com/1920/1080/all?random=18" data-caption="Image 18">
        <img data-thumb="https://loremflickr.com/320/240/all?random=19" data-src="https://loremflickr.com/1920/1080/all?random=19" data-caption="Image 19">
        <img data-thumb="https://loremflickr.com/240/320/all?random=20" data-src="https://loremflickr.com/1080/1920/all?random=20" data-caption="Image 20">
    </div>

Galerie avec chargement sans miniature

<div class="gallery galleryLoading">
                <img data-src="https://loremflickr.com/1920/1080/all?random=1" data-caption="Image 1">
                        <img data-src="https://loremflickr.com/1920/1080/all?random=2" data-caption="Image 2">
                        <img data-src="https://loremflickr.com/1080/1920/all?random=3" data-caption="Image 3">
                        <img data-src="https://loremflickr.com/1080/1920/all?random=4" data-caption="Image 4">
                        <img data-src="https://loremflickr.com/1920/1080/all?random=5" data-caption="Image 5">
                        <img data-src="https://loremflickr.com/1920/1080/all?random=6" data-caption="Image 6">
                        <img data-src="https://loremflickr.com/1920/1080/all?random=7" data-caption="Image 7">
                        <img data-src="https://loremflickr.com/1920/1080/all?random=8" data-caption="Image 8">
                        <img data-src="https://loremflickr.com/1920/1080/all?random=9" data-caption="Image 9">
                        <img data-src="https://loremflickr.com/1920/1080/all?random=10" data-caption="Image 10">
                        <img data-src="https://loremflickr.com/1920/1080/all?random=11" data-caption="Image 11">
                        <img data-src="https://loremflickr.com/1920/1080/all?random=12" data-caption="Image 12">
                        <img data-src="https://loremflickr.com/1080/1920/all?random=13" data-caption="Image 13">
                        <img data-src="https://loremflickr.com/1920/1080/all?random=14" data-caption="Image 14">
                        <img data-src="https://loremflickr.com/1080/1920/all?random=15" data-caption="Image 15">
                        <img data-src="https://loremflickr.com/1080/1920/all?random=16" data-caption="Image 16">
                        <img data-src="https://loremflickr.com/1080/1920/all?random=17" data-caption="Image 17">
                        <img data-src="https://loremflickr.com/1080/1920/all?random=18" data-caption="Image 18">
                        <img data-src="https://loremflickr.com/1920/1080/all?random=19" data-caption="Image 19">
                        <img data-src="https://loremflickr.com/1920/1080/all?random=20" data-caption="Image 20">
            </div>