asked on

jquery delay and cycle

Hello Experts,

On a page i have a slideshow. I want to add text to serve as a caption of the image.
In total there are only two photo so this should not be a long script.....

What i did using my very basic knowledge in jquery is simply use show/hide with the delay.

Like so

        $('#caption1').fadeIn(5000);
	$('#caption1').delay(12000).fadeOut(500);

        $('#caption2').fadeIn(5000);
	$('#caption2').delay(12000).fadeOut(500);

Open in new window

You see in need to follow the time of the photo as they appear and cycle.
- when the first photo appear show caption1
- when the second photo appears hide caption1 and show caption2
- cycle the same timing... first photo appears again.....

Please if someone can help?

Gurvinder Pal Singh

something like

var total = $("[id^='caption']").size();
function showcaption(id){
$("#"+id).fadeIn(5000, function(){
setTimeout("getNextId(" + id + ")", 12000);
});
}

function getNextId(id)
{
$("#"+id).fadeOut(2000, function(){
if ( $("#"+id).index() == size()-1 )
{
id = $( "[id^='caption']").first().attr("id");
}
else
{
id = $("#"+id).next( "[id^='caption']").attr("id");
}
setTimeout("showcaption(" + id + ")", 12000);
});
}

Lalit Chandra

you can do something like following

<html>
<head>
<script script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(function() {
$("#divImage-Slide div:first").hide();
setInterval("SwapImageWithCaption()", 1000);
});
function SwapImageWithCaption()
{
$("#divImage-Slide>div").toggle()
}
</script>
</head>
<body>
<div id="divImage-Slide">
<div id="divImage1">
<img src="Desert.jpg" height="308px" width="308px" >
<div id="divCaption1">Caption 1 - Desert</div>
</div>
<div id="divImage2">
<img src="Chrysanthemum.jpg" height="308px" width="308px">
<div id="divCaption1">Caption 2- Chrysanthemum</div>
</div>
</div>

</body>
</html>

hope this will solve your problem.

Refael

ASKER

Hi again,

gurvinder372, I tried your solution. nothing happens.

Lalit-Chandra, I am only looking for the solution on the caption not the slideshow.

I will set the time corresponding the two photo.

All i am after is the option to set a time for the "caption" 1 to appear then fade... the the time for "caption2" then hide... then to cycle the same function (show/hide) in the same timing.

thanks again guys!

Lalit Chandra

Ok. you want the show/hide effect only on the caption not with the image.So, in that scene you can simple remove the image from the sample i have presented. It will start the animation with caption only.

Refael

ASKER

Hi Lalit-Chandra,

Thank you! for some reason the 2nd caption is displaying first. I can set the time, wonderful.
Can i add fadeIn, fadeOut or slideLeft SlideRight?

Refael

ASKER

Hi Lalit-Chandra,

as in my previous reply, again, thank you!

here is the code below, as i set it.

the second caption gets to show first, do you know why?

Can i add fadeIn, fadeOut or slideLeft SlideRight?

$(function() {
     $("#captions div:first").hide();
     setInterval("SwapImageWithCaption()", 5000);
});
function SwapImageWithCaption()
{
    $("#captions>div").toggle()
}

Open in new window

<div id="captions">
   <div id="caption-1">Caption 1 - Desert</div>
   <div id="caption-2">Caption 2- Chrysanthemum</div>
</div>

Open in new window

Gurvinder Pal Singh

check this simple example code too

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			$("#captions div").hide();

			var id = $("#captions div").first().attr("id");

			showcaption(id);
		});

		function showcaption(id){
			$("#"+id).fadeIn(1000, function(){
			   setTimeout("getNextId('" + id + "')", 120);
			});
		}

		function getNextId(id)
		{
			$("#"+id).fadeOut(2000, function(){

				id = $("#"+id).next( "[id^='caption']").attr("id");
				if ( id == undefined || id == null )
				{
					id = $("#captions div").first().attr("id");
				}
				setTimeout("showcaption('" + id + "')", 1000);
			});
		}
	</script>
</HEAD>

<BODY>
	<div id="captions">
	   <div id="caption-1">Caption 1 - Desert</div>
	   <div id="caption-2">Caption 2- Chrysanthemum</div>
	   <div id="caption-3">Caption 3 - Desert 2</div>
	   <div id="caption-4">Caption 4- Chrysanthemum 2</div>
	</div>
</BODY>
</HTML>

Open in new window

ASKER CERTIFIED SOLUTION

Lalit Chandra

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Refael

ASKER

Thank you so much! I have learned!

Gurvinder Pal Singh

did you tried my solution?