Jquery slideshow with single caption

Hi,

Does anyone have a jquery slideshow or know of a tutorial that shows just one single caption for all images. I want the caption to slide in at the beginning and stay there for all images.

What i want is as exactly as this link below (but this is in flash)

http://www.flabell.com/flash/Slideshow-with-Caption-303


Thanks for your help.
kaz0161Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HainKurtSr. System AnalystCommented:
use 2 divs
one for Caption one for slide show
set left and top and height same for both divs
set css for the caption div to be transporent and on top of slide div
make caption div hidden first and use

$("#divCaption").show("slide", {}, 1000);

http://docs.jquery.com/UI/Effects/show

The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.
0
kaz0161Author Commented:
This is my code at the moment, how do i alter it?
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {		
	
	//Execute the slideShow, set 4 seconds for each images
	slideShow(2000);

});

function slideShow(speed) {


	//append a LI item to the UL list for displaying caption
	$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

	//Set the opacity of all images to 0
	$('ul.slideshow li').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');
	
	//Get the caption of the first image from REL attribute and display it
	$('#slideshow-caption h3').html($('ul.slideshow li.show').find('img').attr('title'));
	$('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt'));
		
	//Display the caption
	$('#slideshow-caption').css({opacity: 0.7, bottom:0});
	
	//Call the gallery function to run the slideshow	
	var timer = setInterval('gallery()',speed);
	
	//pause the slideshow on mouse over
	$('ul.slideshow').hover(
		function () {
			clearInterval(timer);	
		}, 	
		function () {
			timer = setInterval('gallery()',speed);			
		}
	);
	
}

function gallery() {


	//if no IMGs have the show class, grab the first image
	var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
	
	//trying to avoid speed issue
	if(current.queue('fx').length == 0) {	
	
		//Get next image, if it reached the end of the slideshow, rotate it back to the first image
		var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
			
		//Get next image caption
		var title = next.find('img').attr('title');	
		var desc = next.find('img').attr('alt');	
	
		//Set the fade in effect for the next image, show class has higher z-index
		next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
		
		//Hide the caption first, and then set and display the caption
		$('#slideshow-caption').slideToggle(300, function () { 
			$('#slideshow-caption h3').html(title); 
			$('#slideshow-caption p').html(desc); 
			$('#slideshow-caption').slideToggle(500); 
		});		
	
		//Hide the current image
		current.animate({opacity: 0.0}, 1000).removeClass('show');

	}

}
</script>
<style type="text/css">

body {
	font-family:arial;	
	font-size:12px;
}

ul.slideshow {
	list-style:none;
	width:450px;
	height:200px;
	overflow:hidden;
	position:relative;
	margin:0;
	padding:0;
	
}	

ul.slideshow li {
	position:absolute;
	left:0;
	right:0;
}

ul.slideshow li.show {
	z-index:500;	
}

ul img {
	border:none;	
}


#slideshow-caption {
	width:450px;
	height:70px;
	position:absolute;
	bottom:0;
	left:0;	
	color:#fff;
	background:#000;
	z-index:500;
}

#slideshow-caption .slideshow-caption-container {
	padding:5px 10px;		
	z-index:1000;
}

#slideshow-caption h3 {
	margin:0;
	padding:0;	
	font-size:14px;
}

#slideshow-caption p {
	margin:5px 0 0 0;
	padding:0;
}

</style>
</head>
<body>

<ul class="slideshow">
	<li class="show"><a href="http://www.google.com"><img src="images/s1.gif" width="450" height="200" title="Slide 1" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor."/></a></li>
    
	<li><a href="http://www.yahoo.com"><img src="images/s2.gif" width="450" height="200" title="Slide 2" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor."/></a></li>
    
	<li><a href="http://www.msn.com"><img src="images/s3.gif" width="450" height="200" title="Slide 3" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor."/></a></li>
</ul>


</body>

Open in new window

0
HainKurtSr. System AnalystCommented:
try this:
//Hide the caption first, and then set and display the caption
		$('#slideshow-caption').slideToggle(300, function () { 
			$('#slideshow-caption h3').html(title); 
			$('#slideshow-caption p').html(desc); 
			$('#slideshow-caption').slideToggle(500); 
		});

-->

		$('#slideshow-caption h3').html(title); 
		$('#slideshow-caption p').html(desc);

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

kaz0161Author Commented:
0
HainKurtSr. System AnalystCommented:
:) what I mean is, instead of lines2-6, use lines 9-10 above
0
HainKurtSr. System AnalystCommented:
or delete/comment out (add // in front of) lines: 65, 68, 69 on your original post
0
kaz0161Author Commented:
Ah ok! Apologies, got that.

Is it possible to make the caption slide it at first and then stay there?

Also, im must be missing something but i cant seem to make the caption come in from the left to the right. Rather than at the bottom.
0
kaz0161Author Commented:
Ok sorted the left bit. I just need to make it move in from the left and stay.

Thanks!
0
HainKurtSr. System AnalystCommented:
use this

$('#slideshow-caption').show('slide',{},5000);

see below where to put this
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>

...
	//Display the caption
	$('#slideshow-caption').css({opacity: 0.7, bottom:0});

        $('#slideshow-caption').show('slide',{},5000); 

	//Call the gallery function to run the slideshow	
	var timer = setInterval('gallery()',speed);
...

Open in new window

0
kaz0161Author Commented:
Excellent!

Thankyou so much for your help.
0
kaz0161Author Commented:
Accurate and easy to follow. Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.