Affichage des images comme dans Google Image Search

Question

Est-ce que quelqu'un connaît un script qui me permettra d'afficher les résultats d'images à la manière de Google Image Search (vue en grille des images) avec survol pour agrandir et détails ? Quelque chose que je puisse simplement "plug-and-play" pour ainsi dire.

Answer 1

Jetez un coup d'œil à Masonry http://masonry.desandro.com/

Answer 2

Tout d'abord, vous devez placer toutes les images dans un élément conteneur :

<div class="parent">
    <img src="">
    <img src="">
    <img src="">
</div>

Vous devez ensuite vous assurer que les images sont affichées sur une seule ligne. Cela peut être fait en utilisant par exemple float: left . Vous devez également définir vertical-align pour supprimer le petit espace sous chaque image :

img {
    float: left;
    vertical-align: top;
}

Enfin, vous avez besoin de JavaScript pour parcourir en boucle toutes les images et calculer la hauteur de ligne idéale en fonction de leurs dimensions. La seule chose que vous devez indiquer à cet algorithme est la hauteur de ligne maximale que vous souhaitez ( rowMaxHeight )

// Since we need to get the image width and height, this code should run after the images are loaded
var elContainer = document.querySelector('.parent');
var elItems = document.querySelector('.parent img');

var rowMaxHeight = 250; // maximum row height

var rowMaxWidth = elContainer.clientWidth;
var rowWidth = 0;
var rowRatio = 0;
var rowHeight = 0;
var rowFirstItem = 0;
var rowIsLast = false;
var itemWidth = 0;
var itemHeight = 0;

// Make grid
for (var i = 0; i < elItems.length; i++) {
    itemWidth = elItems[i].clientWidth;
    itemHeight = elItems[i].clientHeight;

    rowWidth += itemWidth;
    rowIsLast = i === elItems.length - 1;

    // Check if current item is last item in row
    if (rowWidth + rowGutterWidth >= gridWidth || rowIsLast) {
        rowRatio = Math.min(rowMaxWidth / rowWidth, 1);
        rowHeight = Math.floor(rowRatio * rowMaxHeight);

        // Now that we know the perfect row height, we just 
        // have to loop through all items in the row and set
        // width and height
        for (var x = rowFirstItem; x <= i; x++) {
            elItems[i].style.width = Math.floor(rowRatio * itemWidth * (rowMaxHeight/itemHeight)) + 'px';
            elItems[i].style.height = rowHeight + 'px';
        }

        // Reset row variables for next row
        rowWidth = 0;
        rowFirstItem = i + 1;
    }
}

Notez que ce code n'est pas testé et qu'il s'agit d'une version très simplifiée de ce que fait ce plugin JavaScript vanille : https://fld-grd.js.org

Answer 3

Deux solutions que j'ai trouvées jusqu'à présent.

blogue de didacticiels

jsfiddle

$(function() {

$(window).on('resize', function() {
    $('.openEntry').remove();
    $('.entry').hide();

    var startPosX = $('.preview:first').position().left;
    console.log(startPosX);
    $('.entry, .preview').removeClass("first last");
    $('.entry').each(function() {
        if ($(this).prev('.preview').position().left == startPosX) {
            $(this).prev('.preview').addClass("first");
            $(this).prevAll('.entry:first').addClass("last");
        }
    });
    $('.entry:last').addClass("last");
});
$(window).trigger('resize');

$('.trigger').click(function() {
    $('.openEntry').slideUp(800);
    var preview = $(this).closest('.preview');
    preview.next('.entry').clone().addClass('openEntry').insertAfter(preview.nextAll('.last:first')).slideDown(800);
});

$('body').on('click', '.close', function() {
    $('.openEntry').slideUp(800).remove();
});

})

Answer 4

Codrops met effectivement l'agrandissement de la photo et les détails en ligne au lieu d'une superposition modale :

http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

Answer 5

C'est peut-être ce que vous cherchez... http://www.gethifi.com/demos/jphotogrid