jQuery or PHP seamless image gallery

Question

I'm looking for a way to display a gallery of images of various widths and heights so that there are not any spaces between them.

Something like this solution, but compatible with IE and would prefer horizontal rows rather than vertical columns: http://css-tricks.com/seamless-responsive-photo-grid/

Failing a plugin or similar, does anyone have any info on how to acheive this? I've had a bash at it with a bit of PHP and figured out how to proportionally scale the images to a given max row height and keep track of how much space is left, however this doesn't help when you get images shorter than the max (you still get a bit of whitespace).

One idea was to just display the images, then use jQuery to scale them (using the width / height attributes) as that way I'd be able to take y images and work out how to fit them into a row x pixels wide.

Not short on elbow-grease, just need a nudge in the right direction. Any help appreciated

Answer 1

Okay, so first off you should probably mentally mark the space off into a grid. So, your 'canvas' is x units wide and y units tall. Now, assign images into a structure that holds its x,y starting point, and the number of units it is wide and tall.

Now the fun part - how to execute Using php I would create an array like

$images = array( array(x1_1, y1_1, length_1, width_1, src_1)
                     array(x1_2, y1_2, length_2, width_2, src_2))

That will tell you everything about your pictures you need to know to print them to the screen.

echo "<div id=\"myDiv\">;
foreach($images as $i){
    echo "<img src=\"{$i[5]}\" height=\"{$i[3]}\" width=\"{$i[4]}\" x1=\"{$i[0]}\ y1=\"{$i[1]}\">";
echo "</div>";

At this point I would use jQuery to modify the height and width elements by multiplying the attributes by the scale.

$(document).ready(function(){
    var scale = 30; //30 pixels maybe?
    //I'm not a jquery ninja, so please assume my syntax is wrong
    $("#myDiv").children().each(function(){
        this.attr("height", this.attr("height")*scale);
        this.attr("width", this.attr("width")*scale);
    });

})

Now place the image in the right place based on the x1 and y1 properties

$(document).ready(function(){
    var scale = 30; //30 pixels maybe?
    //I'm not a jquery ninja, so please assume my syntax is wrong
    $("#myDiv").children().each(function(){
        this.css('property', value);
    });

})

Answer 2

I have been trying to get what you want for a while now. I looked are Chris Coyier's seamless photo grid as well, and came upon some problems when I introduced filtering.

You can see my questions/answers on stackoverflow regarding css-column seamless photo grids here and here.

Then, I tried a javascript approach by using jQuery Masnory in a fluid evnvironment. You can read up on how to do that in this stackoverflow post.

It works, but I am still trying to figure out why there are vertical gaps inbetween the images.

So my answer is to use Masonry if you want a javascript approach, but also be aware that I've never seen a seamless and responsive photo implementation of it. I'm still looking.