Visionneur de galeries basé sur Masonry

Attention ! Cet article a plus de 1 an (1035 jours), ce qui signifie qu'il n'est pas forcément à jour !

Quelques sites utilisent le plugin Masonry. Le résultat est assez intéressant et est supporté sur IE8 et plus (ce pour quoi je lui donne tout mon amour).

J’ai créé une galerie d’images avec ce plugin, j’y ai ajouté quelques fonctionnalités supplémentaires pour avoir un zoom lors du clique sur image. Je me suis arrêté là, mais je crois que par la suite les possibilités sont illimitées.

MO TÉLÉCHARGER

Utilisation de base

Voici comment l’utiliser. Premièrement, dans la partie vous y mettez les liens vers Jquery, le JS de Masonry, le JS custom et le CSS comme suit:

<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="masonry.js"></script>
<script src="main.js"></script>

La structure utilisée est très simple. J’ai un premier

avec un ID, je vais m’en servir pour appeler le plugin Masonry dessus. Ensuite, chaque item suit cette structure :

<div class="item" data-kind="portrait">
    <a href='#' class="image">
        <img src="http://fakeimg.pl/220x165/00A3CA/fff">
    </a>
    <div class="fullImage">
        <img src="http://fakeimg.pl/460x535/293540/fff" alt="">
    </div>
    <a href="#" class="close">&times;</a>
</div>

J’utilise la classe ITEM pour styliser mes éléments en CSS. Cette classe sert aussi dans mon JS pour l’ajout de fonctions. J’ai ajouté un attribut de data, le data-kind, avec lequel je fournis l’information de l’image; si elle va être en portrait, paysage ou carré. À l’intérieur de ce

 j’ai le premier lien qui englobe mon image thumbnail, ensuite, un autre
 qui englobe mon image pleine grandeur et je termine avec un lien pour fermer le zoom.

À l’affichage de la page, les liens pour fermer les zooms et les images pleines grandeur sont cachés en CSS. La gestion de ces éléments va être effectuée dans mon JS.

JS

Voici mon JS gère la galerie, les commentaires et explications sont à l’intérieur.

$(document).ready(function() {
    // Affecte une variable avec mon conteneur
    var $container = $('#container');
    // Variables pour la largeur de mes colonnes ainsi que les tailles des types d'images
    var mycolumnWidth = 240;
    var square = [460,460];
    var portrait = [460,535];
    var landscape = [700,350];

    // Initialise la structure (en fait j'appelle masonry).
    setStructure()

    // J'ajoute l'évènement click sur toutes mes images
    $(".image").click(function(e){
        e.preventDefault();

        // le resetStructure est pour être sûr qu'il n'y a pas d'image en mode zoom d'ouverte.
        // Ensuite je réinitialise la structure pour que tout se place comme il se doit.
        resetStructure();
        setStructure()

        // J'affecte une variable avec l'élément cliqué ainsi que son type d'image.
        whichItem = $(this).parent();
        whichKind = $(whichItem).attr('data-kind');

        // J'affecte des variables de width et height selon le type.
        switch (whichKind) {
            case 'square':
                w=square[0];
                h=square[1];
                break;
            case 'portrait':
                w=portrait[0];
                h=portrait[1];
                break;
            case 'landscape':
                w=landscape[0];
                h=landscape[1];
                break;
            default:
                break;
        }
        $(whichItem).css({
            width : w,
            height : h
        });

        // J'ajoute une classe à l'élément ouvert et je fais afficher avec la fonction showBig, l'image de grande taille.
        $(whichItem).addClass('openItem');
        showBig(this);
        $(whichItem).find('.close').show();

        // Une fois la grosse image affichée je réinitialise Masonry pour replacer les autres éléments, une fois fait, j'effectue une transition vers
        // l'élément ouvert. J'ai utilisé un setTimeout pour être sûr de laisser le temps aux éléments d'être correctement placés.
        setStructure();
        setTimeout(function(){goto(whichItem)},500);
    });

    // Fonction pour fermer le zoom
    $(".close").click(function(e){
        e.preventDefault();
        $(this).hide();
        resetStructure();
        setStructure();
    });

    // Fonction qui déplace la fenêtre vers l'élément qui a été zoomé.
    function goto(which){
        $('html, body').animate({
            scrollTop: $(which).offset().top
        }, 700);
    }

    // Fonction pour afficher la grosse image.
    function showBig(whichimage){
        $(whichimage).hide();
        $(whichimage).next().show()
        setTimeout(function(){$(whichimage).next().addClass('shown')},200)
    }

    // Fonction pour cacher la grosse image.
    function hideBig(){
        $('.shown').prev().show();
        $('.shown').removeClass('shown');
    }

    // Fonction qui initialise ou réinitialise le Masonry
    function setStructure() {
        $container.masonry({
            itemSelector : '.item',
            columnWidth : mycolumnWidth,
            isAnimated: true,
            animationOptions: {
                duration: 500,
                easing: 'linear',
                queue: false
            }
        });
    }

    // Fonction qui ferme la grosse image, cache le Close button et remet à la bonne taille l'item qui avait été ouvert.
    function resetStructure() {
        hideBig();
        $(".close").hide();
        $(".item").css({width:220, height:165}).removeClass('openItem');
    }
});

Comme je disais plusieurs possibilités sont par la suite envisageables.

MO TÉLÉCHARGER

Catégories :

HTML CSS Javascript