Does anybody know of a script that will let me diplay image results in the way that Google Image Search does (image grid view) with hover to enlarge and details? Something that I can just "plug-and-play" so to speak.

Does anybody know of a script that will let me diplay image results in the way that Google Image Search does (image grid view) with hover to enlarge and details? Something that I can just "plug-and-play" so to speak.

• javascript
• jquery
• user-interface

8 Answers 8

Have a look at Masonry http://masonry.desandro./

First, you need to put all images inside a container element:

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

Then you need to make sure that the images are displayed in one line. This can be done by e.g. float: left. You should also set vertical-align to remove the small gap underneath each image:

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

Finally you need some JavaScript to loop through all images and calculate the ideal rowHeight based on their dimensions. The only thing you need to tell this algorithm is the maximum row height that you want (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;
    }
}

Note that this code is not tested and a very simplified version of what this vanilla JavaScript plugin does: https://fld-grd.js

Two solutions that I have found so far.

tutorial blog

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();
});

})

codrops actually puts the photo enlargement/details inline instead of as a modal overlay:

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

This might be what you are looking for... http://www.gethifi./demos/jphotogrid

Have a look at the gPop plugin

DEMO

Download in Github

Check out this jQuery Plugin: https://github./brunjo/rowGrid.js

It places images like on the Google image search.

Simply just repeat your images like this:

<img style="float: left; height: 12em; margin-right: 1%; margin-bottom: 0.5em;border:1px solid lightgray" src="ImgSrc " />