asked on 10/5/2011

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.

JScript HTML CSS

Last Comment

kaz0161

10/5/2011

HainKurt

10/5/2011

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'.

kaz0161

10/5/2011

ASKER

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

ASKER CERTIFIED SOLUTION

HainKurt

10/5/2011

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

kaz0161

10/5/2011

ASKER

Nothing's changed:-

http://www.karen.hunter.myzen.co.uk/fabric_site/slideshow2/

HainKurt

10/5/2011

:) what I mean is, instead of lines2-6, use lines 9-10 above

HainKurt

10/5/2011

or delete/comment out (add // in front of) lines: 65, 68, 69 on your original post

kaz0161

10/5/2011

ASKER

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.

kaz0161

10/5/2011

ASKER

Ok sorted the left bit. I just need to make it move in from the left and stay.

Thanks!

HainKurt

10/5/2011

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

kaz0161

10/5/2011

ASKER

Excellent!

Thankyou so much for your help.

kaz0161

10/5/2011

ASKER

Accurate and easy to follow. Thanks.