Hello,
Request you to read and help-
Have formed an image gallery page.
The problem is that I need to write code for each and all images that are there in the "Photos" folder.
I desire a jquery code to inhabit all the photos in the gallery in a page wise mode.
Any possibility?
Don’t wish to affix asp.net or php in this site, only javascript/jquery.
Pls go thru the html/css code here-
<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}
.........................Thanks very much.
39 weeks 6 days ago