Dynamic-Mess.com


"The world is a dynamic mess of jiggling things..."

Gallerie en jQuery

Article posté le 14-04-2014 dans la catégorie JavaScript, JQuery...

Lassé de devoir afficher vos images dans un nouvel onglet? Vous avez sûrement déja aperçu ce système à la mode qui consiste a noircir l'arrière-plan et à afficher l'image à sa taille réelle. Voici comment faire pour mettre en place ce système bien agréable pour l'utilisateur :

1- Côté HTML

Vos images doivent être placées dans une div particulière. Dans notre exemple, cette div a pour id : "conteneur-miniatures"

Vos images doivent avoir un attribut alt et un attribut rel.

 

2- Côté CSS

Le style de vos div background et large :

#large {
    display: none;
    position: absolute;
    background: #FFFFFF;
    padding: 5px;
    z-index: 10;
    min-height: 200px;
    min-width: 200px;
    color: #336699;
}
#background{
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    z-index: 1;
}

 

3- Côté jQuery :

var Largeur = 0;
var Hauteur = 0;

jQuery.fn.center = function() {

    $("#background").css('margin-top', $(document).scrollTop());

    this.css("position", "absolute");
    var bougeHaut = ($(document).scrollTop() + ($(window).height() - Hauteur) / 2);
    this.css("top", bougeHaut);
    this.css("left", ($(window).width() - Largeur) / 2 + "px");

    return this;
};

function messageChargement(statut) {
    if (statut == "in") {
        var divMessage = '<div id="divMessage" style="visibility: hidden; width:200px; height:100px; background-color:grey;"></div>';
        $("body").append(divMessage);
        $('#divMessage').css('font-weight', 'bold');
        $('#divMessage').css('font-size', 'large');
        $('#divMessage').css('line-height', '100px');
        $('#divMessage').css('text-align', 'center');
        $('#divMessage').css('vertical-align', 'middle');
        $('#divMessage').css('position', 'absolute');
        $('#divMessage').append("Chargement...");
        $('#divMessage').css('visibility', 'visible');

        var bougeHaut = ($(document).scrollTop() + ($(window).height() - 100) / 2);
        $('#divMessage').css("top", bougeHaut);
        $('#divMessage').css("left", ($(window).width() - 200) / 2 + "px");
    } else if (statut == "out") {
        $('#divMessage').remove();
    } else {

    }
}

$(document).ready(function() {
    $("#conteneur-miniatures img").click(function(e) {
        messageChargement("in");


        $("#background").css({"opacity": "0.7"}).fadeIn("slow");
        var monImage = $(this);

        var urlImage = $(this).parent().attr("href");
        var img = new Image();

        img.onload = function() {
            Largeur = this.width;
            Hauteur = this.height;
            $("#large").html("<img src='" + monImage.parent().attr("href") + "' alt='" + monImage.attr("alt") + "' /><br/>" + monImage.attr("rel") + "")
                    .center()
                    .fadeIn("slow");
            messageChargement("out");
        };
        img.src = urlImage;
        return false;
    });

    function fadeOut() {
        $("#background").fadeOut("slow");
        $("#large").fadeOut("slow");
    }

    jQuery(document).ready(function()
    {
        $("body").append('<div id="background"></div>');
        $("body").append('<div id="large"></div>');
    });

    $(document).on({
        click: function() {
            fadeOut();
        }
    }, '#background');

    $(document).on({
        click: function() {
            fadeOut();
        }
    }, '#large');
});

Et voilà ! Libre à vous de modifier/améliorer!

 


Tweet
comments powered by Disqus