Hi All. I'm working on a modified carousel script, and trying to add functionality of a dynamic description accompanying each image when it becomes active. I'm very new to jquery, and it's been years since I've studied js or anything like that, so please bear with me if this is simple to do.
I'd also like the gallery to change depending on which nav button is pressed (i'll have 2 or 3 different galleries, but I'd like them all to occur in the same space). I appreciate any help at all.
Thanks. I've posted the code I have so far below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>A Simple Carousel</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function() {
//rotation speed and timer
var speed = 9000;
var run = setInterval('rotate()', speed);
//grab the width and calculate left value
var item_width = $('#slides li').outerWidth();
var left_value = item_width * (-1);
//move the last item before first item, just in case user click prev button
$('#slides li:first').before($('#slides li:last'));
//set the default item to the correct position
$('#slides ul').css({'left' : left_value});
//if user clicked on prev button
$('#prev').click(function() {
//get the right position
var left_indent = parseInt($('#slides ul').css('left')) + item_width;
//slide the item
$('#slides ul:not(:animated)').animate({'left' : left_indent}, 500,function(){
//move the last item and put it as first item
$('#slides li:first').before($('#slides li:last'));
//set the default item to correct position
$('#slides ul').css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if user clicked on next button
$('#next').click(function() {
//get the right position
var left_indent = parseInt($('#slides ul').css('left')) - item_width;
//slide the item
$('#slides ul:not(:animated)').animate({'left' : left_indent}, 500, function () {
//move the first item and put it as last item
$('#slides li:last').after($('#slides li:first'));
//set the default item to correct position
$('#slides ul').css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if mouse hover, pause the auto rotation, otherwise rotate it
$('#slides').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('rotate()', speed);
}
);
//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin :)
function rotate() {
$('#next').click();
}
</script>
<style>
#carousel {
width:600px;
height:375px;
margin:0 auto;
overflow:hidden;
}
#slides {
overflow:hidden;
/* fix ie overflow issue */
position:relative;
width:600px;
height:375px;
border:0px solid #ccc;
margin: 0px;
}
#description {
font:Tahoma;
overflow:hidden;
/* fix ie overflow issue */
position:relative;
width:600px;
height:100px;
border:0px solid #FFFFFF;
visibility: visible;
margin: 0 auto;
background-color: #FFFFFF;
}
/* remove the list styles, width : item width * total items */
#slides ul {
position:relative;
left:0;
top:0;
list-style:none;
margin:0;
padding:0;
width:9000px;
}
/* width of the item, in this case I put 250x250x gif */
#slides li {
width:600px;
height:375px;
float:left;
}
#slides li img {
padding:4px;
}
/* Styling for prev and next buttons */
#buttons {
padding:0 0 5px 0;
float:right;
}
#buttons a {
display:block;
width:31px;
height:32px;
text-indent:-999em;
float:left;
outline:0;
}
a#prev {
background:url(arrow.gif) 0 -31px no-repeat;
}
a#prev:hover {
background:url(arrow.gif) 0 0 no-repeat;
}
a#next {
-32px -31px no-repeat;
}
a#next:hover {
-32px 0 no-repeat;
}
.clear {clear:both}
body {
background-color: #FFF;
}
</style>
</head>
<body>
<a href="#" id="next"><div id="carousel">
<div id="slides">
<li><img src="Gallery/01.jpg" width="600" height="375" title="Slide 1" alt="Short Description"/></li>
<li><img src="Gallery/02.jpg" width="600" height="375" title="Slide 2" alt="Short Description"/></li>
<li><img src="Gallery/03.jpg" width="600" height="375" title="Slide 3" alt="Short Description"/></li>
<li><img src="Gallery/04.jpg" width="600" height="375" title="Slide 4" alt="Short Description"/></li>
<li><img src="Gallery/05.jpg" width="600" height="375" title="Slide 5" alt="Short Description"/></li>
<li><img src="Gallery/06.jpg" width="600" height="375" title="Slide 6" alt="Short Description"/></li>
<li><img src="Gallery/07.jpg" width="600" height="375" title="Slide 7" alt="Short Description"/></li>
<li><img src="Gallery/08.jpg" width="600" height="375" title="Slide 8" alt="Short Description"/></li>
<li><img src="Gallery/09.jpg" width="600" height="375" title="Slide 9" alt="Short Description"/></li>
<li><img src="Gallery/10.jpg" width="600" height="375" title="Slide 10" alt="Short Description"/></li>
<li><img src="Gallery/11.jpg" width="600" height="375" title="Slide 11" alt="Short Description"/></li>
<li><img src="Gallery/12.jpg" width="600" height="375" title="Slide 12" alt="Short Description"/></li>
<li><img src="Gallery/13.jpg" width="600" height="375" title="Slide 13" alt="Short Description"/></li>
<li><img src="Gallery/14.jpg" width="600" height="375" title="Slide 14" alt="Short Description"/></li>
<li><img src="Gallery/15.jpg" width="600" height="375" title="Slide 15" alt="Short Description"/></li>
</ul>
</div>
</div></a>
<div id="description">
Image 1
</div>
</body>
</html>