Le plugin least.js

Cliquez sur l’image pour voir l’animation:

Avec le plugin least.js, on peut facilement créer un page portfolio qui sort un peu de l’ordinaire.

Sur notre page html, on doit créer une liste contenant une première li vide en display:none par défaut, c’est celle qui va contenir notre image au grand format. Toutes les div contenant les descriptions doivent aussi être cachées en display:none par défaut. La structure à respecter est indiquée sur le site du plugin . Il faut donc une liste ul li ,contenant un lien vers l’image en grande taille, l’image elle même avec une taille miniature par défaut que vous pouvez définir et appeler via l’attribut data-original. L’image doit aussi contenir une classe.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/least.min.css" rel="stylesheet" />
        <!-- jQuery libary -->

        <!-- least.js JS-file -->

        <title></title>
    </head>
    <body>
        <section>
            <button id="nature">Nature</button> <button id="sports">Sports</button>
            <ul id="gallery"> 
                <li id="fullPreview"></li>             
                 <li>
                    <a href="http://lorempixel.com/960/600/sports"></a>
                    <img data-original="http://lorempixel.com/400/200/sports" src="http://lorempixel.com/400/200/sports" width="240" height="150" alt="Ocean" class="sports" />

                    <div class="overLayer"></div>
                    <div class="infoLayer">
                        <ul>
                            <li>
                                <h2>
                                    Ocean
                                </h2>
                            </li>
                            <li>
                                <p>
                                    View Picture
                                </p>
                            </li>
                        </ul>
                    </div>
                    <div class="projectInfo">
                        <strong>
                            Day, Month, Year:
                        </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>
                </li>

                 <li>
                    <a href="http://lorempixel.com/960/600/nature"></a>
                    <img data-original="http://lorempixel.com/400/200/nature" src="http://lorempixel.com/400/200/nature" width="240" height="150" alt="Ocean" class="nature"/>

                    <div class="overLayer"></div>
                    <div class="infoLayer">
                        <ul>
                            <li>
                                <h2>
                                    Ocean
                                </h2>
                            </li>
                            <li>
                                <p>
                                    View Picture
                                </p>
                            </li>
                        </ul>
                    </div>
                    <div class="projectInfo">
                        <strong>
                            Day, Month, Year:
                        </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>
                </li>
//ICI PLUS D IMAGES..
            </ul>
        </section>
    </body>
</html>

Voici la partie jquery à insérer dans un fichier js à part :

<script src="js/least.min.js" defer="defer"></script>
        <script>
            $(document).ready(function() {
                $('#gallery').least();

            });
        </script>
        <script src="js/jquery.lazyload.min.js" defer="defer"></script>
        <script type="text/javascript">
        $(document).ready(function() {
                $('#nature').click(function() {
                    $('img').css('opacity', '1');
                    $('img').not('.nature').css('opacity', '0.5');
                });

                    $('#sports').click(function() {
                        $('img').css('opacity', '1');
                        $('img').not('.sports').css('opacity', '0.5');
                    });
        });
        </script>

Au chargement de la page, on appelle notre plugin sur notre div #gallery.

J »ai crée un bouton pour chaque groupe d’image, et au clic sur le bouton à l’ID #sports, je définis pour toutes les images une opacité par défaut à 1 avec la fonction jquery .css

Et avec la fonction .not je dis : tout ce qui n’a pas la classe .sports je lui applique une opacité de 0.5. Pour le reste c’est le plugin qui s’en occupe!!

27/03/2014 Mis à jour le 19/12/2018 Par Copier coller | Dans jQuery