jQuery Forum

Hi,

I created a image gallery page. But in this i have to write code for each and every image I have in the 'photos' folder. I want a jquery code to populate all the photos in the gallery in a page wise manner. Is it possible? I do not want to add asp.net or php in this site. just javascript/jquery. I will give the html/css code below.


=================

 <div id="page_wrap"> <div id="page_top"></div> <div id="page"> <div id="gallery"> <div class="float_left_thumb"><a href='photos/1.jpg' title="Old Tree" class="group" rel="group"> <img src="photos/1.jpg" alt="demo" /></a></div> <div class="float_left_thumb"><a href='photos/1.jpg' title="Old Tree" class="group" rel="group"> <img src="photos/1.jpg" alt="demo" /></a></div> 

 <div class="float_left_thumb"><a href='photos/1.jpg' title="Old Tree" class="group" rel="group"> <img src="photos/1.jpg" alt="demo" /></a></div> <div class="float_left_thumb"><a href='photos/1.jpg' title="Old Tree" class="group" rel="group"> <img src="photos/1.jpg" alt="demo" /></a></div> <div class="float_left_thumb"><a href='photos/1.jpg' title="Old Tree" class="group" rel="group"> <img src="photos/1.jpg" alt="demo" /></a></div> <div class="float_left_thumb"><a href='photos/1.jpg' title="Old Tree" class="group" rel="group"> <img src="photos/1.jpg" alt="demo" /></a></div> <div class="float_left_thumb"><a href='photos/1.jpg' title="Old Tree" class="group" rel="group"> 

 <img src="photos/1.jpg" alt="demo" /></a></div> <div class="float_left_thumb"><a href='photos/1.jpg' title="Old Tree" class="group" rel="group"> <img src="photos/1.jpg" alt="demo" /></a></div> <div class="float_left_thumb"><a href='photos/1.jpg' title="Old Tree" class="group" rel="group"> <img src="photos/1.jpg" alt="demo" /></a></div> <div class="float_left_thumb"><a href='photos/1.jpg' title="Old Tree" class="group" rel="group"> <img src="photos/1.jpg" alt="demo" /></a></div> </div><!-- close gallery --> 

</div><!-- close page -->
=======================================
css style file code below:

#page_wrap {width: 960px; margin: auto}

#page_top {height: 54px; background: url(images/page_top.jpg) no-repeat}

#page {background: url(images/page_tile.jpg) repeat-y; padding: 0 54px;}

#gallery {
 width: 852px;
 margin: auto;
 overflow: auto;
 padding-bottom: 18px;
 position:static;
}

.float_left_thumb {
 float: left;
 height: 164px;
 width: 152px;
 margin: 8px 10px 2px 8px;
 background: url(images/gallery_thumb.png) no-repeat;
 padding-top: 6px;
 text-align: center;
}

.float_left_thumb a img{
 height: 140px;
 width: 140px;
}

.center {margin: auto;

#no_gallery_found {width: 798; padding: 50px; margin: auto; background: red; border: 10px solid white}
.........................