Une galerie… Chic pour mettre ses photos en valeur !

Faire une galerie de A à Z est un peu complexe, c’est pourquoi je vous propose d’utiliser un script pour la réaliser.

Ce script se nomme Least.js et est sans doute l’un des plus joli et complet pour faire une galerie responsive. De plus, l’installation est vraiment simple comme vous allez le voir.

Installation :

Tout d’abord, téléchargez le script ici .

Ensuite, insérez ce code entre vos balise

<span class="token comment" spellcheck="true" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(112, 128, 144);"><!-- least.js CSS-file --></span>
<span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>link</span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">href</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>css/least.min.css<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">rel</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>stylesheet<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span> <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">/></span></span>
<span class="token comment" spellcheck="true" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(112, 128, 144);"><!-- jQuery libary --></span>
<span class="token script" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>script</span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">src</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>http://code.jquery.com/jquery-latest.js<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">defer</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>defer<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>script</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span></span>
<span class="token comment" spellcheck="true" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(112, 128, 144);"><!-- least.js JS-file --></span>
<span class="token script" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>script</span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">src</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>js/least.min.js<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">defer</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>defer<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>script</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span></span>
<span class="token comment" spellcheck="true" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(112, 128, 144);"><!-- Lazyload JS-file --></span>
<span class="token script" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>script</span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">src</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>js/jquery.lazyload.min.js<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">defer</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>defer<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>script</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span></span>

Créez un tableau (choisissez bien l’id de votre galerie vous en aurez besoin) dans une balise

:

<span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>section</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
    <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>ul</span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">id</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>gallery<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">>

</span></span>

Entre vos deux balises

    placez le code de vos images (lisez bien mes commentaires):

    <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>li</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
            <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>a</span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">href</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>img/full/1.jpg<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>a</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">> // placez le lien de votre image en full-size</span></span>
            <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>img</span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">data-original</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>img/thumb/1.jpg<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">src</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>img/effects/white.gif<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">width</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>240<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">height</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>150<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">alt</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>Ocean<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span> <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">/> // placez le lien de votre image dans data-original</span></span>
            
            <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>div</span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">class</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>overLayer<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>div</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
            <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>div</span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">class</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>infoLayer<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
                <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>ul</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
                    <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>li</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
                        <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>h2</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
                            Ocean 
                        <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>h2</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">> // Titre de votre image</span></span>
                    <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>li</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
                    <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>li</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
                        <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>p</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
                            Voir l'image
                        <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>p</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">> // Texte quand on passe la souris sur l'image</span></span>
                    <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>li</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
                <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>ul</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
            <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>div</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
            
            <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>div</span> <span class="token attr-name" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">class</span><span class="token attr-value" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span>projectInfo<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">"</span></span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
                <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"><</span>strong</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>
                    Jour, Mois, Année:
                <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>strong</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
            <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>div</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">> // Description de votre image</span></span>
        <span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="border: 0px; margin: 0px; padding: 0px; outline: 0px;"><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);"></</span>li</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">></span></span>

    Il vous suffit de placez ce code autant de fois que vous avez d’images.

    Pour lancer votre galerie insérez ce code entre deux balises avant la fin de votreet saisissez bien le bon id.

    $<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">(</span>document<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">.</span>ready<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">(</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">(</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">{</span>
    $<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">(</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(102, 153, 0);">'#gallery'</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">.</span>least<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">(</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">;</span>
<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; outline: 0px; color: rgb(153, 153, 153);">;</span>

    Et voilà, votre galerie est fonctionnelle. J’espère que ce tuto vous plaira et postez vos questions dans les commentaires !