Question

Using javascript/jQuery:

I have an array with images and I need to display them in my web. The number of images will vary.
Depending on the width and height available due to screen resolution I will display x rows and y columns in order to fill the space.
All images are width=115px and height=120px

When the rows of images go out of view (the vertical scroll shows) I need to place them in a new div (id=’slide’). This new div I will use to create a slide and show a second/third .. set of images by the clicking of an arrow.

I’m calculating the dimensions of the space available using:

function Resize(){
    var docheight = jQuery('.main_insidem').height();    
    var docwidth = jQuery('.main_insidem').width();
    jQuery('.main_insidem').html(docheight+' '+docwidth);
}

And everything is contained in

<div id="slidesContainer"></div>

I need to end up with something like:

<div id='slide'><img src='image1.jpg'><img src='image2.jpg'><img src='image3.jpg'><img src='image4.jpg'><img src='image5.jpg'>..</div>

<div id='slide'><img src='imagex+1.jpg'><img src='imagex+2.jpg'><img src='imagex+3.jpg'><img src='imagex+4.jpg'><img src='imagex+5.jpg'>..</div>

<div id='slide'><img src='imagey+1.jpg'><img src='imagey+2.jpg'><img src='imagey+3.jpg'><img src='imagey+4.jpg'><img src='imagey+5.jpg'>..</div>
.

.

Any ideas on how to proceed?

Thanks a lot!

Answer 1

Images load within a container. As you resize window, images will adjust accordingly. No need to do any width or height calculations.

jQuery

$("img").each(function(index) {
    $(this).delay(400 * index).fadeIn(300);
});

CSS

.wrap{
    height:400px;
    border:1px solid red;
}
img{
    display:none;
    margin:5px 5px 0 0;
    float:left;
}

HTML

<div class="wrap">   
    <img ...>
    <img ...>
    ..
</div>

Check working example at http://jsfiddle.net/38D6f/1/