I think I've done something similar to this. What I did (for a one-row
image grid with horizontal scrolling) was have a div with a fixed
height and width, overflow: hidden, and position:relative. I put a
child div with absolute positioning and a large enough width so that
it will accommodate all child image elements in one row. Finally, I
put all the child image elements in this div, with the restriction
that all images have the same width and height. Two scrolling buttons
with click events attached to them are used to scroll left or right,
which is done by changing the left property of the div with absolute
positioning. Ex:
The HTML:
<img class="galleryNav left" alt="left arrow" src=leftArrow.gif" />
<div class="thumbnail-container">
<div class="thumbnail-scroll">
<img src='1.gif'></img>
<img src='2.gif'></img>
...
<img src='40.gif'></img>
</div>
</div>
<img class="galleryNav right" src="rightArrow.gif"/>
With the CSS:
.thumbnail-container {
height: 100px;
width: 800px;
position: relative;
overflow: hidden;
}
.thumbnail-scroll {
position: absolute;
width: 4200px; /* a little more than needed */
}
.thumbail-scroll img {
height:100px;
width:100px;
}
and a sample javascript:
$('.left').click(function() {
$('.thumbnail-scroll').animate({left: "-=100px"}, 500); //
animated scrolling
});
$('.right').click(function() {
$('.thumbnail-scroll').animate({left: "+=100px"}, 500);
});
To extend it to a grid you could change the height and with values of
both divs. Also note that the img tags should really have alt
attributes.
On Oct 26, 8:41 pm, Arunkumar Puppala <puppala.arunku...@gmail.com>
wrote:
> Hi all,
>
> I am trying to build an application that displays the images in the form of
> a grid. We get the total number of images and number of images displayed on
> a page through a cgi parameter. Can someone suggest me how to build such an
> image grid with pagination controls?
>
> Thanks,
> Arun
