Visionneur de galeries basé sur Masonry

À 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.

DÉMO TÉLÉCHARGER