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 <head></head>

<!-- least.js CSS-file -->
<link href="css/least.min.css" rel="stylesheet" />
<!-- jQuery libary -->
<script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script>
<!-- least.js JS-file -->
<script src="js/least.min.js" defer="defer"></script>
<!-- Lazyload JS-file -->
<script src="js/jquery.lazyload.min.js" defer="defer"></script>

Créez un tableau (choisissez bien l'id de votre galerie vous en aurez besoin) dans une balise <section> :

<section>
    <ul id="gallery">

    </ul>
</section>

Entre vos deux balises <ul></ul> placez le code de vos images (lisez bien mes commentaires):

<li>
            <a href="img/full/1.jpg"></a> // placez le lien de votre image en full-size
            <img data-original="img/thumb/1.jpg" src="img/effects/white.gif" width="240" height="150" alt="Ocean" /> // placez le lien de votre image dans data-original
            
            <div class="overLayer"></div>
            <div class="infoLayer">
                <ul>
                    <li>
                        <h2>
                            Ocean 
                        </h2> // Titre de votre image
                    </li>
                    <li>
                        <p>
                            Voir l'image
                        </p> // Texte quand on passe la souris sur l'image
                    </li>
                </ul>
            </div>
            
            <div class="projectInfo">
                <strong>
                    Jour, Mois, Année:
                </strong> 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.
            </div> // Description de votre image
        </li>

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 <script></script> avant la fin de votre <body> et saisissez bien le bon id.

$(document).ready(function(){
    $('#gallery').least();
});

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