Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Jquery slideshow with single caption

Posted on 2011-10-05
11
Medium Priority
?
603 Views
Last Modified: 2012-06-21
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.
0
Comment
Question by:kaz0161
  • 6
  • 5
11 Comments
 
LVL 61

Expert Comment

by:HainKurt
ID: 36919181
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
 

Author Comment

by:kaz0161
ID: 36919434
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
 
LVL 61

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 36919600
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 61

Expert Comment

by:HainKurt
ID: 36920024
:) what I mean is, instead of lines2-6, use lines 9-10 above
0
 
LVL 61

Expert Comment

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

Author Comment

by:kaz0161
ID: 36920139
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
 

Author Comment

by:kaz0161
ID: 36920163
Ok sorted the left bit. I just need to make it move in from the left and stay.

Thanks!
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 36920341
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
 

Author Comment

by:kaz0161
ID: 36920442
Excellent!

Thankyou so much for your help.
0
 

Author Closing Comment

by:kaz0161
ID: 36920508
Accurate and easy to follow. Thanks.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question