jQuery all-in-one gallery
Tweet
jQuery all-in-one gallery
Information
This gallery has everything.
By that I mean that it has many choices of viewing the photographs.
The top row of thumbnail images, which are the actual size images scaled down using CSS, can be scrolled left and right by positioning the mouse at the left or right of the line (between the red arrows). You can then click on any image to see the full size below.
The image number is displayed in the ‘control line box’.
You can click the ‘Next’ image icon to display the next image in the sequence or the ;Previous; icon to view the previous image. These icons will be blanked when you reach the first or last image.
You can click the ‘Play’ icon to auto play the images which will loop back to the first image when it reaches the last image. To stop auto play just click the icon again.
All the functions work even when auto play is on. You can scroll the top thumbnails and click any image, which will cause auto play to jump to that image or use the left/right icons to move auto play back or forwards one image.
You will need a copy of jQuery to be able to use this slideshow.
If you would like a copy of this demonstration then please email me and make a donation to support stunicholls.com, every little helps to keep this site up and running.
DEMO
-
Title One
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Two
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Three
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Four
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Five
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Six
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Seven
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Eight
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Nine
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Ten
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Eleven
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Twelve
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Thirteen
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Fourteen
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Fifteen
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Sixteen
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Seventeen
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Eighteen
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div. -
Title Nineteen
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div.
Title Ten
Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.
The jQuery routine is just used to read the information from the ‘thumb’ li and write it to the ‘fullSize’ div.
HTML CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery all-in-one gallery</title>
<style type="text/css">
#gallery {position:relative; width:600px; height:690px; background:#efebe7 url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/back.gif) no-repeat 42px 13px; padding-bottom:10px; border:1px solid #8b7f72; font-family:verdana, arial, sans-serif; font-size:11px; line-height:1.5em;}
#gallery #imageNumber {display:block; width:200px; height:38px; background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/number.gif); text-align:center; line-height:38px; font-size:11px; margin:0; color:#222; position:absolute; top:110px; left:200px;}
#thumbnails {width:500px; height:75px; overflow:hidden; margin:20px 49px 60px 49px; position:relative;}
#innerContainer {position:absolute; left:0; top:0; height:75px; overflow:hidden;}
#thumbnails ul {margin:0; padding:0; list-style:none;}
#thumbnails ul li {float:left; height:75px;}
#thumbnails ul li div {display:none;}
#thumbnails ul li img {display:block; height:75px; padding:0 1px;}
#fullSize {width:500px; margin:0 auto; background:#a49a91; text-align:center; border:1px solid #8b7f72;}
#fullSize img {display:block; margin:10px auto 10px auto; border:1px solid #fff;}
#fullSize div {margin:0 auto; background:#a49a91; text-align:left;padding:10px;}
#fullSize div h1 {margin:0; padding:0; font-size:18px; line-height:18px; color:#fff;}
#clickLeft {width:35px; height:38px; position:absolute; left:160px; top:110px; background:#fff url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/blank.gif);}
#clickRight {width:35px; height:38px; position:absolute; left:405px; top:110px; background:#fff url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/next.gif);}
#slideLeft {width:15px; height:89px; position:absolute; left:50px; top:14px; background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/trans.gif);}
#slideRight {width:15px; height:89px; position:absolute; right:50px; top:14px; background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/trans.gif);}
#autoPlay {width:35px; height:38px; position:absolute; left:445px; top:110px; background:#fff url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/play.gif);}
</style>
<script src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/jquery-1.js" type="text/javascript"></script>
<script>
var $modcruz = jQuery.noConflict();
</script>
<script type="text/javascript">
/* <![CDATA[ */
gallery = function() {
/* show first image and information */
showTime=7000;
timer=0;
absLeft=0;
picCount=0;
total = $modcruz('.thumb img').length;
$totalImgs = $modcruz('.thumb img');
$modcruz('#imageNumber').html('Image 1 of ' + total + ' http://www.phpasks.com/blogs/wp-content/uploads/2009/11/' );
thumbWidth = 0;
for (x=0; x<total; x++) {
thumbWidth = thumbWidth + $modcruz($totalImgs[x]).outerWidth();
}
$modcruz('#innerContainer') .css({ width: thumbWidth + 'px'});
$modcruz('#innerContainer img').css({ display: 'inline'});
firstStr = $modcruz('.thumb');
showStr = firstStr.html();
showDiv(showStr)
$modcruz('#slideLeft') .hover(function(e){
$modcruz('#innerContainer') .stop();
$modcruz('#innerContainer') .animate({"left": "0px"}, 5000 , "swing")
},function(){
$modcruz('#innerContainer') .stop();
});
$modcruz('#slideRight') .hover(function(e){
posLeft = $modcruz('#thumbnails') .offset().left;
absLeft = e.pageX - posLeft;
hiddenBit = thumbWidth - 500;
$modcruz('#innerContainer') .stop();
$modcruz('#innerContainer') .animate({"left": -hiddenBit + "px"}, 5000 , "swing")
},function(){
$modcruz('#innerContainer') .stop();
});
/* monitor mouse clicks */
$modcruz('.thumb').click(function(){
htmlStr = $modcruz(this).html();
currentLarge = $modcruz(this).attr('class').split(' ').slice(-1);
if ("p"+(total) == currentLarge) {
$modcruz('#clickRight').css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/blank.gif)")
.attr("alt", "")
.attr("title", "");
}
else {
$modcruz('#clickRight').css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/next.gif)")
.attr("alt", "Next")
.attr("title", "Next");
}
if ("p1" == currentLarge) {
$modcruz('#clickLeft') .css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/blank.gif)")
.attr("alt", "")
.attr("title", "");
}
else {
$modcruz('#clickLeft').css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/previous.gif)")
.attr("alt", "Previous")
.attr("title", "Prevous");
}
/* swap images and information */
$modcruz('#fullSize') .fadeOut(600, function(){showDiv(htmlStr)});
});
/* show image and information */
function showDiv (htmlStr) {
$modcruz('#fullSize') .html(htmlStr)
.fadeIn(600);
currentLarge = $modcruz('#fullSize img').attr('class');
currentLarge = currentLarge.substr(1,3);
$modcruz('#imageNumber').html('Image ' + currentLarge + ' of ' + total + ' http://www.phpasks.com/blogs/wp-content/uploads/2009/11/' );
}
$modcruz('#clickRight').click(function(){
currentLarge = $modcruz('#fullSize img').attr('class');
if ("p"+(total-1) == currentLarge) {
$modcruz('#clickRight') .css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/blank.gif)")
.attr("alt", "")
.attr("title", "");
}
if ("p" + total != currentLarge) {
$modcruz('#clickLeft') .css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/previous.gif)")
.attr("alt", "Previous")
.attr("title", "Previous");
htmlStr = $modcruz('#innerContainer li.'+currentLarge).next('li').html();
$modcruz('#fullSize') .fadeOut(600, function(){showDiv(htmlStr)});
}
});
$modcruz('#clickLeft') .click(function(){
currentLarge = $modcruz('#fullSize img').attr('class');
if ("p2" == currentLarge) {
$modcruz('#clickLeft') .css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/blank.gif)")
.attr("alt", "")
.attr("title", "");
}
if ("p1" != currentLarge) {
$modcruz('#clickRight') .css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/next.gif)")
.attr("alt", "Next")
.attr("title", "Next");
htmlStr = $modcruz('#innerContainer li.'+currentLarge).prev('li').html();
$modcruz('#fullSize') .fadeOut(600, function(){showDiv(htmlStr)});
}
});
$modcruz('#autoPlay') .toggle(function(){
$modcruz('#autoPlay') .css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/stop.gif)")
.attr("alt", "Stop")
.attr("title", "Stop");
autoPlay()
},function(){
clearTimeout(timer);
$modcruz('#autoPlay') .css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/play.gif)")
.attr("alt", "Play")
.attr("title", "Play");
});
}
function autoPlay () {
currentLarge = $modcruz('#fullSize img').attr('class');
if ("p"+(total-1) == currentLarge) {
$modcruz('#clickRight') .css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/blank.gif)")
.attr("alt", "")
.attr("title", "");
}
if ("p" + total != currentLarge) {
$modcruz('#clickLeft') .css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/previous.gif)")
.attr("alt", "Previous")
.attr("title", "Previous");
htmlStr = $modcruz('#innerContainer li.'+currentLarge).next('li').html();
$modcruz('#fullSize') .fadeOut(600, function(){playDiv(htmlStr)});
}
if ("p"+(total) == currentLarge) {
$modcruz('#clickLeft') .css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/blank.gif)")
.attr("alt", "")
.attr("title", "");
$modcruz('#clickRight') .css("backgroundImage", "url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/next.gif)")
.attr("alt", "Next")
.attr("title", "Next");
htmlStr = $modcruz('#innerContainer li.p1').html();
$modcruz('#fullSize') .fadeOut(600, function(){playDiv(htmlStr)});
}
timer = setTimeout ("autoPlay()", showTime);
}
function playDiv (htmlStr) {
$modcruz('#fullSize') .html(htmlStr)
.fadeIn(600);
currentLarge = $modcruz('#fullSize img').attr('class');
currentLarge = currentLarge.substr(1,3);
$modcruz('#imageNumber').html('Image ' + currentLarge + ' of ' + total + ' images' );
}
/* ]]> */
</script>
</head><body onload="gallery()">
<div id="wrapper">
<div id="content">
<h2>jQuery all-in-one gallery</h2>
<div id="gallery">
<div id="thumbnails">
<ul style="width: 1819px; left: 0px;" id="innerContainer">
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t1.jpg" alt="">
<div>
<h1>Title One</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t2.jpg" alt="">
<div>
<h1>Title Two</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t3.jpg" alt="">
<div>
<h1>Title Three</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t4.jpg" alt="">
<div>
<h1>Title Four</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t5.jpg" alt="">
<div>
<h1>Title Five</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t6.jpg" alt="">
<div>
<h1>Title Six</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t7.jpg" alt="">
<div>
<h1>Title Seven</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t8.jpg" alt="">
<div>
<h1>Title Eight</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t9.jpg" alt="">
<div>
<h1>Title Nine</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t10.jpg" alt="">
<div>
<h1>Title Ten</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t11.jpg" alt="">
<div>
<h1>Title Eleven</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t12.jpg" alt="">
<div>
<h1>Title Twelve</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t13.jpg" alt="">
<div>
<h1>Title Thirteen</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t14.jpg" alt="">
<div>
<h1>Title Fourteen</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t15.jpg" alt="">
<div>
<h1>Title Fifteen</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t16.jpg" alt="">
<div>
<h1>Title Sixteen</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t17.jpg" alt="">
<div>
<h1>Title Seventeen</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t18.jpg" alt="">
<div>
<h1>Title Eighteen</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li>
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t19.jpg" alt="">
<div>
<h1>Title Nineteen</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
</ul>
</div>
<div style="" id="fullSize">
<img style="display: inline;" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/t10.jpg" alt="">
<div>
<h1>Title Ten</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br>The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</div>
<div id="imageNumber">Image 10 of 19 images</div>
<div id="slideLeft" title="«"></div>
<div id="slideRight" title="»"></div>
<div style="background-image: url(images/previous.gif);" id="clickLeft" alt="Previous" title="Previous"></div>
<div style="background-image: url(images/next.gif);" id="clickRight" alt="Next" title="Next"></div>
<div style="background-image: url(images/play.gif);" id="autoPlay" alt="Play" title="Play"></div>
</div>
</div>
</div>
</body></html>
No comments yet.