[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 929
  • Last Modified:

How to pause a JQuery slideshow by default

I am using the CrossSlide JQuery plugin http://tobia.github.com/CrossSlide/ and I would like to be able to make the slideshow pause by default when the page loads.  CrossSlide uses it's own separate JQuery plugin to add a Pause method.  I have tried adding this method in various locations in the script, by using the .load() and .ready() event handlers, but with no success.

I have a test page that I have created with 2 separate slideshows.  Can someone tell me the correct syntax and position to activate this pause feature by default?

http://www.fourmattech.com/flipbook/CrossSlide.htm

Thank you!
0
FourMat
Asked:
FourMat
  • 13
  • 12
1 Solution
 
cmalakarCommented:
>> I have tried adding this method in various locations in the script, by using the .load() and .ready() event handlers, but with no success.

Which method you put in .read() ? Can you show ?
0
 
FourMatAuthor Commented:
At line 114 I added the following:

$test3.ready(function() {
		$test3.crossSlidePause();
		state(PAUSE);
	});

Open in new window


The PAUSE state is set on the buttons properly, but the pause method was not invoked.  Is this because it wasn't invoked at the right time, or order in the script?  I've tried several locations within the script, but it didn't change the result.

This is the complete script:


$(function() {
	var $test3 = $('#test3'),
		$test5 = $('#test5')
		$caption = $('div.caption'),
		$pause = $('#pause'),
		$resume = $('#resume'),
		$freeze = $('#freeze'),
		$stop = $('#stop'),
		$restart = $('#restart'),
		$pause5 = $('#pause5'),
		$resume5 = $('#resume5'),
		$freeze5 = $('#freeze5'),
		$stop5 = $('#stop5'),
		$restart5 = $('#restart5'),
		STOP = 1, RUN = 2, PAUSE = 3;

	$test3.crossSlide({
		fade: 1
	}, [
		{
			src:  'TP-Trifold-Ani-1.jpg',
			//alt:  'Sand Castle',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-2.jpg',
			//alt:  'Sunflower',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-3.jpg',
			//alt:  'Flip Flops',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-4.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-5.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-6.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-7.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-10.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-11.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-12.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-13.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-14.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}
	], function(idx, img, idxOut, imgOut) {
		if (idxOut == undefined) {
			$caption.text(img.alt).animate({ opacity: .7 })
		} else {
			$caption.animate({ opacity: 0 })
		} 
		
	});
	//$caption.show().css({ opacity: 0 })

	function state(state) {
		$pause.attr('disabled', state != RUN);
		$resume.attr('disabled', state != PAUSE);
		$freeze.attr('disabled', state == STOP);
		$stop.attr('disabled', state == STOP);
		
	}
	state(RUN);
	//state(PAUSE);

	
	$test3.ready(function() {
		$test3.crossSlidePause();
		state(PAUSE);
	});
	
	$pause.click(function() {
		$test3.crossSlidePause();
		state(PAUSE);
	});

	$resume.click(function() {
		$test3.crossSlideResume();
		state(RUN);
	})

	$freeze.click(function() {
		$test3.crossSlideFreeze();
		state(STOP);
	});

	$stop.click(function() {
		$test3.crossSlideStop();
		$caption.css({ opacity: 0 })
		state(STOP);
	});

	$restart.click(function() {
		$test3.crossSlideRestart();
		state(RUN);
	});
	
	
	

	
	$test5.crossSlide({
		//sleep: 2,
		fade: 1
	}, [
		{
			src:  'TP-Trifold-Ani-1.jpg',
			//alt:  'Sand Castle',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-2.jpg',
			//alt:  'Sunflower',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-3.jpg',
			//alt:  'Flip Flops',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-4.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-5.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-6.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-7.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-10.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-11.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-12.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-13.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-14.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}
	], function(idx, img, idxOut, imgOut) {
		if (idxOut == undefined) {
			$caption.text(img.alt).animate({ opacity: .7 })
		} else {
			$caption.animate({ opacity: 0 })
		}
	});
	//$caption.show().css({ opacity: 0 })
	
	function state5(state5) {
		$pause5.attr('disabled', state5 != RUN);
		$resume5.attr('disabled', state5 != PAUSE);
		$freeze5.attr('disabled', state5 == STOP);
		$stop5.attr('disabled', state5 == STOP);
		
	}
	state5(RUN);
	//state(PAUSE);
	
	
	
	$pause5.click(function() {
		$test5.crossSlidePause();
		state5(PAUSE);
	});

	$resume5.click(function() {
		$test5.crossSlideResume();
		state5(RUN);
	})

	$freeze5.click(function() {
		$test5.crossSlideFreeze();
		state5(STOP);
	});

	$stop5.click(function() {
		$test5.crossSlideStop();
		$caption.css({ opacity: 0 })
		state5(STOP);
	});

	$restart5.click(function() {
		$test5.crossSlideRestart();
		state5(RUN);
	});
	
	
	/*$test3.ready(function(){
		$test3.crossSlidePause();
		state(PAUSE);
	});
	*/
});

Open in new window

0
 
cmalakarCommented:
Instead can you try with the following.

I just added a click event to the pause button at the end, and commented state(RUN), uncommented state(PAUSE);
$(function() {
	var $test3 = $('#test3'),
		$test5 = $('#test5')
		$caption = $('div.caption'),
		$pause = $('#pause'),
		$resume = $('#resume'),
		$freeze = $('#freeze'),
		$stop = $('#stop'),
		$restart = $('#restart'),
		$pause5 = $('#pause5'),
		$resume5 = $('#resume5'),
		$freeze5 = $('#freeze5'),
		$stop5 = $('#stop5'),
		$restart5 = $('#restart5'),
		STOP = 1, RUN = 2, PAUSE = 3;

	$test3.crossSlide({
		fade: 1
	}, [
		{
			src:  'TP-Trifold-Ani-1.jpg',
			//alt:  'Sand Castle',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-2.jpg',
			//alt:  'Sunflower',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-3.jpg',
			//alt:  'Flip Flops',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-4.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-5.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-6.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-7.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-10.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-11.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-12.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-13.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-14.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}
	], function(idx, img, idxOut, imgOut) {
		if (idxOut == undefined) {
			$caption.text(img.alt).animate({ opacity: .7 })
		} else {
			$caption.animate({ opacity: 0 })
		} 
		
	}
	);
	//$caption.show().css({ opacity: 0 })

	function state(state) {
		$pause.attr('disabled', state != RUN);
		$resume.attr('disabled', state != PAUSE);
		$freeze.attr('disabled', state == STOP);
		$stop.attr('disabled', state == STOP);
		
	}
	//state(RUN);
	state(PAUSE);

	
	$test3.ready(function() {
		$test3.crossSlidePause();
		state(PAUSE);
	});
	
	$pause.click(function() {
		$test3.crossSlidePause();
		state(PAUSE);
	});

	$resume.click(function() {
		$test3.crossSlideResume();
		state(RUN);
	})

	$freeze.click(function() {
		$test3.crossSlideFreeze();
		state(STOP);
	});

	$stop.click(function() {
		$test3.crossSlideStop();
		$caption.css({ opacity: 0 })
		state(STOP);
	});

	$restart.click(function() {
		$test3.crossSlideRestart();
		state(RUN);
	});
	
	
	

	
	$test5.crossSlide({
		//sleep: 2,
		fade: 1
	}, [
		{
			src:  'TP-Trifold-Ani-1.jpg',
			//alt:  'Sand Castle',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-2.jpg',
			//alt:  'Sunflower',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-3.jpg',
			//alt:  'Flip Flops',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-4.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-5.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-6.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-7.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-10.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-11.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-12.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-13.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-14.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}
	], function(idx, img, idxOut, imgOut) {
		if (idxOut == undefined) {
			$caption.text(img.alt).animate({ opacity: .7 })
		} else {
			$caption.animate({ opacity: 0 })
		}
	});
	//$caption.show().css({ opacity: 0 })
	
	function state5(state5) {
		$pause5.attr('disabled', state5 != RUN);
		$resume5.attr('disabled', state5 != PAUSE);
		$freeze5.attr('disabled', state5 == STOP);
		$stop5.attr('disabled', state5 == STOP);
		
	}
	state5(RUN);
	//state(PAUSE);
	
	
	
	$pause5.click(function() {
		$test5.crossSlidePause();
		state5(PAUSE);
	});

	$resume5.click(function() {
		$test5.crossSlideResume();
		state5(RUN);
	})

	$freeze5.click(function() {
		$test5.crossSlideFreeze();
		state5(STOP);
	});

	$stop5.click(function() {
		$test5.crossSlideStop();
		$caption.css({ opacity: 0 })
		state5(STOP);
	});

	$restart5.click(function() {
		$test5.crossSlideRestart();
		state5(RUN);
	});
	
	
	/*$test3.ready(function(){
		$test3.crossSlidePause();
		state(PAUSE);
	});
	*/
}
$("pause").trigger("click");
);

Open in new window

0
Technology Partners: 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!

 
FourMatAuthor Commented:
The state change of the button is changing to disabled, as it should, but $("pause").trigger("click"); is not working either.
0
 
cmalakarCommented:
oh.. this should be

$("#pause").trigger("click");  //missing #

if still didn't work, can you put an alert in the pause button event handler () and check if the control is coming ?
0
 
FourMatAuthor Commented:
I caught that and tried it, but it didn't work either.  I just tried it again, clearing cache, etc, just in case.  Still not working.  I have the changes posted up via the previous link:

http://www.fourmattech.com/flipbook/CrossSlide.htm
0
 
cmalakarCommented:
>>if still didn't work, can you put an alert in the pause button event handler () and check if the control is coming ?
0
 
FourMatAuthor Commented:
Done.  It seems to be catching the click, just not recognizing the pause on the start

I assume this is what you meant.  

$pause.click(function() {
            $test3.crossSlidePause();
            alert($(this).text());
            state(PAUSE);
      });

I'm a jquery newbie so I'm a little unsure of how to structure a lot of things.  
0
 
FourMatAuthor Commented:
Maybe it is because it is performing the click before the photos are loaded so there is nothing to pause when it is invoked.  Is there a way to wait until the slideshow is loaded before invoking the click?
0
 
cmalakarCommented:
I think, function declaration inside the function might be causing the problem.

Check with this.
function state5(state5) {
		$("#pause5").attr('disabled', state5 != RUN);
		$("#resume5").attr('disabled', state5 != PAUSE);
		$("#freeze5").attr('disabled', state5 == STOP);
		$("#stop5").attr('disabled', state5 == STOP);
	}
	function state(state) {
		$("#pause").attr('disabled', state != RUN);
		$("#resume").attr('disabled', state != PAUSE);
		$("#freeze").attr('disabled', state == STOP);
		$("#stop").attr('disabled', state == STOP);
		
	}

$(function() {
	var $test3 = $('#test3'),
		$test5 = $('#test5'),
		$caption = $('div.caption'),
		$pause = $('#pause'),
		$resume = $('#resume'),
		$freeze = $('#freeze'),
		$stop = $('#stop'),
		$restart = $('#restart'),
		$pause5 = $('#pause5'),
		$resume5 = $('#resume5'),
		$freeze5 = $('#freeze5'),
		$stop5 = $('#stop5'),
		$restart5 = $('#restart5'),
		STOP = 1, RUN = 2, PAUSE = 3;

	$test3.crossSlide({
		fade: 1
	}, [
		{
			src:  'TP-Trifold-Ani-1.jpg',
			//alt:  'Sand Castle',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-2.jpg',
			//alt:  'Sunflower',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-3.jpg',
			//alt:  'Flip Flops',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-4.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-5.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-6.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-7.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-10.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-11.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-12.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-13.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-14.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}
	], function(idx, img, idxOut, imgOut) {
		if (idxOut == undefined) {
			$caption.text(img.alt).animate({ opacity: .7 })
		} else {
			$caption.animate({ opacity: 0 })
		} 
		
	}
	);
	//$caption.show().css({ opacity: 0 })

	
	//state(RUN);
	

	
	$test3.ready(function() {
		$test3.crossSlidePause();
		state(PAUSE);
	});
	
	$pause.click(function() {
		$test3.crossSlidePause();
		state(PAUSE);
	});

	$resume.click(function() {
		$test3.crossSlideResume();
		state(RUN);
	})

	$freeze.click(function() {
		$test3.crossSlideFreeze();
		state(STOP);
	});

	$stop.click(function() {
		$test3.crossSlideStop();
		$caption.css({ opacity: 0 })
		state(STOP);
	});

	$restart.click(function() {
		$test3.crossSlideRestart();
		state(RUN);
	});
	
	
	

	
	$test5.crossSlide({
		//sleep: 2,
		fade: 1
	}, [
		{
			src:  'TP-Trifold-Ani-1.jpg',
			//alt:  'Sand Castle',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-2.jpg',
			//alt:  'Sunflower',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-3.jpg',
			//alt:  'Flip Flops',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-4.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-5.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-6.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-7.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-10.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-11.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-12.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-13.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-14.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}
	], function(idx, img, idxOut, imgOut) {
		if (idxOut == undefined) {
			$caption.text(img.alt).animate({ opacity: .7 })
		} else {
			$caption.animate({ opacity: 0 })
		}
	});
	//$caption.show().css({ opacity: 0 })

	state5(RUN);
	//state(PAUSE);
	
	
	
	$pause5.click(function() {
		$test5.crossSlidePause();
		state5(PAUSE);
	});

	$resume5.click(function() {
		$test5.crossSlideResume();
		state5(RUN);
	})

	$freeze5.click(function() {
		$test5.crossSlideFreeze();
		state5(STOP);
	});

	$stop5.click(function() {
		$test5.crossSlideStop();
		$caption.css({ opacity: 0 })
		state5(STOP);
	});

	$restart5.click(function() {
		$test5.crossSlideRestart();
		state5(RUN);
	});
	
	
	/*$test3.ready(function(){
		$test3.crossSlidePause();
		state(PAUSE);
	});
	*/
}
$("#pause").trigger("click");
state(PAUSE);
);

Open in new window

0
 
FourMatAuthor Commented:
I'm getting a syntax error on line 282 with that one.  
0
 
cmalakarCommented:
Try with this..
var STOP = 1, RUN = 2, PAUSE = 3;

function state5(state5) {
		$("#pause5").attr('disabled', state5 != RUN);
		$("#resume5").attr('disabled', state5 != PAUSE);
		$("#freeze5").attr('disabled', state5 == STOP);
		$("#stop5").attr('disabled', state5 == STOP);
	}
	function state(state) {
		$("#pause").attr('disabled', state != RUN);
		$("#resume").attr('disabled', state != PAUSE);
		$("#freeze").attr('disabled', state == STOP);
		$("#stop").attr('disabled', state == STOP);
		
	}

$(function() {
	var $test3 = $('#test3'),
		$test5 = $('#test5'),
		$caption = $('div.caption'),
		$pause = $('#pause'),
		$resume = $('#resume'),
		$freeze = $('#freeze'),
		$stop = $('#stop'),
		$restart = $('#restart'),
		$pause5 = $('#pause5'),
		$resume5 = $('#resume5'),
		$freeze5 = $('#freeze5'),
		$stop5 = $('#stop5'),
		$restart5 = $('#restart5');

	$test3.crossSlide({
		fade: 1
	}, [
		{
			src:  'TP-Trifold-Ani-1.jpg',
			//alt:  'Sand Castle',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-2.jpg',
			//alt:  'Sunflower',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-3.jpg',
			//alt:  'Flip Flops',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-4.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-5.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-6.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-7.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-10.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-11.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-12.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-13.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-14.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}
	], function(idx, img, idxOut, imgOut) {
		if (idxOut == undefined) {
			$caption.text(img.alt).animate({ opacity: .7 })
		} else {
			$caption.animate({ opacity: 0 })
		} 
		
	}
	);
	//$caption.show().css({ opacity: 0 })

	
	//state(RUN);
	

	
	$test3.ready(function() {
		$test3.crossSlidePause();
		state(PAUSE);
	});
	
	$pause.click(function() {
		$test3.crossSlidePause();
		state(PAUSE);
	});

	$resume.click(function() {
		$test3.crossSlideResume();
		state(RUN);
	});

	$freeze.click(function() {
		$test3.crossSlideFreeze();
		state(STOP);
	});

	$stop.click(function() {
		$test3.crossSlideStop();
		$caption.css({ opacity: 0 })
		state(STOP);
	});

	$restart.click(function() {
		$test3.crossSlideRestart();
		state(RUN);
	});
	
	
	

	
	$test5.crossSlide({
		//sleep: 2,
		fade: 1
	}, [
		{
			src:  'TP-Trifold-Ani-1.jpg',
			//alt:  'Sand Castle',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-2.jpg',
			//alt:  'Sunflower',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-3.jpg',
			//alt:  'Flip Flops',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-4.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-5.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-6.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-7.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-10.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-11.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-12.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-13.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}, {
			src:  'TP-Trifold-Ani-14.jpg',
			//alt:  'Rubber Ring',
			from: '100% 100% 1x',
			to:   '100% 100% 1x',
			time: 1
		}
	], function(idx, img, idxOut, imgOut) {
		if (idxOut == undefined) {
			$caption.text(img.alt).animate({ opacity: .7 })
		} else {
			$caption.animate({ opacity: 0 })
		}
	});
	//$caption.show().css({ opacity: 0 })

	//state5(RUN);
	//state(PAUSE);
	
	
	
	$pause5.click(function() {
		$test5.crossSlidePause();
		state5(PAUSE);
	});

	$resume5.click(function() {
		$test5.crossSlideResume();
		state5(RUN);
	})

	$freeze5.click(function() {
		$test5.crossSlideFreeze();
		state5(STOP);
	});

	$stop5.click(function() {
		$test5.crossSlideStop();
		$caption.css({ opacity: 0 })
		state5(STOP);
	});

	$restart5.click(function() {
		$test5.crossSlideRestart();
		state5(RUN);
	});
	
	
	/*$test3.ready(function(){
		$test3.crossSlidePause();
		state(PAUSE);
	});
	*/
$("#pause").trigger("click");
state(PAUSE);
state5(RUN);
}
);

Open in new window

0
 
FourMatAuthor Commented:
That change didn't seem to have any effect.  Same situation. Pause button state is changed to disabled fine, but slideshow didn't invoke the pause method.
0
 
cmalakarCommented:
I dont understand why click event is not firing.

did you put an alert in pause button event handler, and check if the control is really coming ?

Also change the variable name in function state(state) to function state(st)   // just to be safer side

0
 
FourMatAuthor Commented:
Yes, check out the demo page.  I changed the state designation also.

One thing that I noticed is that the images are actually showing up on the screen after the pause button event handler is invoked.  Maybe there is something in the CrossSlide plugin that disregards the pause feature until all of the images have loaded and the animation is running.

The pause feature is not a native jquery method, so I tried invoking the freeze method, and it did the same thing.  I think it is a loading order or timing issue.  Is there a way to trigger the invocation of the methods after the images load?
0
 
cmalakarCommented:
To confirm if that is the case, you can invoke "$("#pause").trigger("click");" after few seconds.
like this..

setTimeut('$("#pause").trigger("click")', 10000);  //executes the statement after 10 seconds. You can update 10 seconds to required time and check.
0
 
FourMatAuthor Commented:
That is exactly what's happening.  If I shorten the time to 1000 and reload it works fine, but if I clear the cache and force it to reload the images from the server,  the pause doesn't get invoked because it comes before the images are loaded.  It works every time if the delay is 10 seconds.   I had tried using the .delay feature, but apparently it wasn't the proper way to do it.

Attached is the crossSlide jquery plugin, do you see a location where I can invoke the pause by default right after the images are loaded?


(function() {
	var $ = jQuery,
		animate = ($.fn.startAnimation ? 'startAnimation' : 'animate'),
		pause_missing = 'pause plugin missing.';

	// utility to format a string with {0}, {1}... placeholders
	function format(str) {
		for (var i = 1; i < arguments.length; i++)
			str = str.replace(new RegExp('\\{' + (i-1) + '}', 'g'), arguments[i]);
		return str;
	}

	// utility to abort with a message to the error console
	function abort() {
		arguments[0] = 'CrossSlide: ' + arguments[0];
		throw new Error(format.apply(null, arguments));
	}

	// utility to parse "from" and "to" parameters
	function parse_position_param(param) {
		var zoom = 1;
		var tokens = param.replace(/^\s*|\s*$/g, '').split(/\s+/);
		if (tokens.length > 3) throw new Error();
		if (tokens[0] == 'center')
			if (tokens.length == 1)
				tokens = ['center', 'center'];
			else if (tokens.length == 2 && tokens[1].match(/^[\d.]+x$/i))
				tokens = ['center', 'center', tokens[1]];
		if (tokens.length == 3)
			zoom = parseFloat(tokens[2].match(/^([\d.]+)x$/i)[1]);
		var pos = tokens[0] + ' ' + tokens[1];
		if (pos == 'left top' || pos == 'top left')
			return { xrel: 0, yrel: 0, zoom: zoom };
		if (pos == 'left center' || pos == 'center left')
			return { xrel: 0, yrel: .5, zoom: zoom };
		if (pos == 'left bottom' || pos == 'bottom left')
			return { xrel: 0, yrel: 1, zoom: zoom };
		if (pos == 'center top' || pos == 'top center')
			return { xrel: .5, yrel: 0, zoom: zoom };
		if (pos == 'center center')
			return { xrel: .5, yrel: .5, zoom: zoom };
		if (pos == 'center bottom' || pos == 'bottom center')
			return { xrel: .5, yrel: 1, zoom: zoom };
		if (pos == 'right top' || pos == 'top right')
			return { xrel: 1, yrel: 0, zoom: zoom };
		if (pos == 'right center' || pos == 'center right')
			return { xrel: 1, yrel: .5, zoom: zoom };
		if (pos == 'right bottom' || pos == 'bottom right')
			return { xrel: 1, yrel: 1, zoom: zoom };
		return {
			xrel: parseInt(tokens[0].match(/^(\d+)%$/)[1]) / 100,
			yrel: parseInt(tokens[1].match(/^(\d+)%$/)[1]) / 100,
			zoom: zoom
		};
	}

	$.fn.crossSlide = function(opts, plan, callback)
	{
		var self = this,
				self_width = this.width(),
				self_height = this.height();

		// must be called on exactly 1 element
		if (self.length != 1)
			abort('crossSlide() must be called on exactly 1 element')

		// saving params for crossSlide.restart
		self.get(0).crossSlideArgs = [ opts, plan, callback ];

		// make working copy of plan
		plan = $.map(plan, function(p) {
			return $.extend({}, p);
		});

		// options with default values
		if (! opts.easing)
			opts.easing = opts.variant ? 'swing' : 'linear';
		if (! callback)
			callback = function() {};

		// first preload all the images, while getting their actual width and height
		(function(proceed) {

			var n_loaded = 0;
			function loop(i, img) {
				// this loop is a for (i = 0; i < plan.length; i++)
				// with independent var i, img (for the onload closures)
				img.onload = function(e) {
					n_loaded++;
					plan[i].width = img.width;
					plan[i].height = img.height;
					if (n_loaded == plan.length)
						proceed();
				}
				img.src = plan[i].src;
				if (i + 1 < plan.length)
					loop(i + 1, new Image());
			}
			loop(0, new Image());

		})(function() { // then proceed

			// check global params
			if (! opts.fade)
				abort('missing fade parameter.');
			if (opts.speed && opts.sleep)
				abort('you cannot set both speed and sleep at the same time.');

			// conversion from sec to ms; from px/sec to px/ms
			var fade_ms = Math.round(opts.fade * 1000);
			if (opts.sleep)
				var sleep = Math.round(opts.sleep * 1000);
			if (opts.speed)
				var speed = opts.speed / 1000,
						fade_px = Math.round(fade_ms * speed);

			// set container css
			self.empty().css({
				overflow: 'hidden',
				padding: 0
			});
			if (! /^(absolute|relative|fixed)$/.test(self.css('position')))
				self.css({ position: 'relative' });
			if (! self.width() || ! self.height())
				abort('container element does not have its own width and height');

			// random sorting
			if (opts.shuffle)
				plan.sort(function() {
					return Math.random() - 0.5;
				});

			// prepare each image
			for (var i = 0; i < plan.length; ++i) {

				var p = plan[i];
				if (! p.src)
					abort('missing src parameter in picture {0}.', i + 1);

				if (speed) { // speed/dir mode

					// check parameters and translate speed/dir mode into full mode
					// (from/to/time)
					switch (p.dir) {
						case 'up':
							p.from = { xrel: .5, yrel: 0, zoom: 1 };
							p.to = { xrel: .5, yrel: 1, zoom: 1 };
							var slide_px = p.height - self_height - 2 * fade_px;
							break;
						case 'down':
							p.from = { xrel: .5, yrel: 1, zoom: 1 };
							p.to = { xrel: .5, yrel: 0, zoom: 1 };
							var slide_px = p.height - self_height - 2 * fade_px;
							break;
						case 'left':
							p.from = { xrel: 0, yrel: .5, zoom: 1 };
							p.to = { xrel: 1, yrel: .5, zoom: 1 };
							var slide_px = p.width - self_width - 2 * fade_px;
							break;
						case 'right':
							p.from = { xrel: 1, yrel: .5, zoom: 1 };
							p.to = { xrel: 0, yrel: .5, zoom: 1 };
							var slide_px = p.width - self_width - 2 * fade_px;
							break;
						default:
							abort('missing or malformed dir parameter in picture {0}.', i+1);
					}
					if (slide_px <= 0)
						abort('impossible animation: either picture {0} is too small or '
							+ 'div is too large or fade duration too long.', i + 1);
					p.time_ms = Math.round(slide_px / speed);

				} else if (! sleep) { // full mode

					// check and parse parameters
					if (! p.from || ! p.to || ! p.time)
						abort('missing either speed/sleep option, or from/to/time params '
							+ 'in picture {0}.', i + 1);
					try {
						p.from = parse_position_param(p.from)
					} catch (e) {
						abort('malformed "from" parameter in picture {0}.', i + 1);
					}
					try {
						p.to = parse_position_param(p.to)
					} catch (e) {
						abort('malformed "to" parameter in picture {0}.', i + 1);
					}
					if (! p.time)
						abort('missing "time" parameter in picture {0}.', i + 1);
					p.time_ms = Math.round(p.time * 1000)
				}

				// precalculate left/top/width/height bounding values
				if (p.from)
					$.each([ p.from, p.to ], function(i, each) {
						each.width = Math.round(p.width * each.zoom);
						each.height = Math.round(p.height * each.zoom);
						each.left = Math.round((self_width - each.width) * each.xrel);
						each.top = Math.round((self_height - each.height) * each.yrel);
					});

				// append the image (or anchor) element to the container
				var img, elm;
				elm = img = $(format('<img src="{0}"/>', p.src));
				if (p.href)
					elm = $(format('<a href="{0}"></a>', p.href)).append(img);
				if (p.onclick)
					elm.click(p.onclick);
				if (p.alt)
					img.attr('alt', p.alt);
				if (p.rel)
					elm.attr('rel', p.rel);
				if (p.href && p.target)
					elm.attr('target', p.target);
				elm.appendTo(self);
			}
			delete speed; // speed mode has now been translated to full mode

			// utility to compute the css for a given phase between p.from and p.to
			// 0: begin fade-in, 1: end fade-in, 2: begin fade-out, 3: end fade-out
			function position_to_css(p, phase) {
				var pos = [ 0, fade_ms / (p.time_ms + 2 * fade_ms),
					1 - fade_ms / (p.time_ms + 2 * fade_ms), 1 ][phase];
				return {
					left: Math.round(p.from.left + pos * (p.to.left - p.from.left)),
					top: Math.round(p.from.top + pos * (p.to.top - p.from.top)),
					width: Math.round(p.from.width + pos * (p.to.width - p.from.width)),
					height: Math.round(p.from.height + pos * (p.to.height-p.from.height))
				};
			}

			// find images to animate and set initial css attributes
			var imgs = self.find('img').css({
				position: 'absolute',
				visibility: 'hidden',
				top: 0,
				left: 0,
				border: 0
			});

			// show first image
			imgs.eq(0).css({ visibility: 'visible' });
			if (! sleep)
				imgs.eq(0).css(position_to_css(plan[0], opts.variant ? 0 : 1));

			// create animation chain
			var countdown = opts.loop;
			function create_chain(i, chainf) {
				// building the chain backwards, or inside out

				if (i % 2 == 0) {
					if (sleep) {
						// single image sleep
						var i_sleep = i / 2,
								i_hide = (i_sleep - 1 + plan.length) % plan.length,
								img_sleep = imgs.eq(i_sleep),
								img_hide = imgs.eq(i_hide);
						var newf = function() {
							callback(i_sleep, img_sleep.get(0));
							img_hide.css('visibility', 'hidden');
							setTimeout(chainf, sleep);
						};
					} else {
						// single image animation
						var i_slide = i / 2,
								i_hide = (i_slide - 1 + plan.length) % plan.length,
								img_slide = imgs.eq(i_slide),
								img_hide = imgs.eq(i_hide),
								time = plan[i_slide].time_ms,
								slide_anim = position_to_css(plan[i_slide],
									opts.variant ? 3 : 2);
						var newf = function() {
							callback(i_slide, img_slide.get(0));
							img_hide.css('visibility', 'hidden');
							img_slide[animate](slide_anim, time, opts.easing, chainf);
						};
					}
				} else {
					// double image animation
					var i_from = Math.floor(i / 2),
							i_to = Math.ceil(i / 2) % plan.length,
							img_from = imgs.eq(i_from),
							img_to = imgs.eq(i_to),
							from_anim = {},
							to_init = { visibility: 'visible' },
							to_anim = {};
					if (i_to > i_from) {
						to_init.opacity = 0;
						to_anim.opacity = 1;
						if (opts.doubleFade)
							from_anim.opacity = 0;
					} else {
						from_anim.opacity = 0;
						if (opts.doubleFade) {
							to_init.opacity = 0;
							to_anim.opacity = 1;
						}
					}
					if (! sleep) {
						// moving images
						$.extend(to_init, position_to_css(plan[i_to], 0));
						if (! opts.variant) {
							$.extend(from_anim, position_to_css(plan[i_from], 3));
							$.extend(to_anim, position_to_css(plan[i_to], 1));
						}
					}
					if ($.isEmptyObject(to_anim)) {
						var newf = function() {
							callback(i_to, img_to.get(0), i_from, img_from.get(0));
							img_to.css(to_init);
							img_from[animate](from_anim, fade_ms, 'linear', chainf);
						};
					} else if ($.isEmptyObject(from_anim)) {
						var newf = function() {
							callback(i_to, img_to.get(0), i_from, img_from.get(0));
							img_to.css(to_init);
							img_to[animate](to_anim, fade_ms, 'linear', chainf);
						};
					} else {
						var newf = function() {
							callback(i_to, img_to.get(0), i_from, img_from.get(0));
							img_to.css(to_init);
							img_to[animate](to_anim, fade_ms, 'linear');
							img_from[animate](from_anim, fade_ms, 'linear', chainf);
						};
					}
				}

				// if the loop option was requested, push a countdown check
				if (opts.loop && i == plan.length * 2 - 2) {
					var newf_orig = newf;
					newf = function() {
						if (--countdown) newf_orig();
					}
				}

				if (i > 0)
					return create_chain(i - 1, newf);
				else
					return newf;
			}
			var animation = create_chain(plan.length * 2 - 1,
				function() { return animation(); });

			// start animation
			animation();
		});
		return self;
	};

	$.fn.crossSlideFreeze = function()
	{
		this.find('img').stop();
	}

	$.fn.crossSlideStop = function()
	{
		this.find('img').stop().remove();
	}

	$.fn.crossSlideRestart = function()
	{
		this.find('img').stop().remove();
		$.fn.crossSlide.apply(this, this.get(0).crossSlideArgs);
	}

	$.fn.crossSlidePause = function()
	{
		if (! $.fn.pause)
			abort(pause_missing);
		this.find('img').pause();
	}

	$.fn.crossSlideResume = function()
	{
		if (! $.fn.pause)
			abort(pause_missing);
		this.find('img').resume();
	}
})();

Open in new window

0
 
cmalakarCommented:
Check when is this function called ?

function(idx, img, idxOut, imgOut) {
            if (idxOut == undefined) {
                  $caption.text(img.alt).animate({ opacity: .7 })
            } else {
                  $caption.animate({ opacity: 0 })
            }
      }

This is passed as callback to crossSlide, is it invoked after loading the images ?
0
 
FourMatAuthor Commented:
Honestly, I get totally lost when I try to determine where that function is invoked.  I am over my head right now, but I think that you have given me enough to get me where I need to be with pausing the slideshow.  It doesn't appear that this is going to be a relatively simple modification with the way that the jquery plugin is structured.  Thanks for the help.
0
 
cmalakarCommented:
>> I am over my head right now

What does that mean.. you have got the solution.. or you don't want to look into this.. ?

0
 
FourMatAuthor Commented:
It means that I don't have the knowledge to determine where that function is called.  I have a basic lack of understanding of how the scripting language is structured. I have not found a solution, and I would like to be able to get this system to work as I had intended, but I don't have the ability to answer the question you ask and provide the information that you need.  I had posted the code for the crossslide plugin above if that helps.
0
 
cmalakarCommented:
Give me some time.
0
 
cmalakarCommented:
Try with the following code for cross slide plugin.
(function() {
	var $ = jQuery,
		animate = ($.fn.startAnimation ? 'startAnimation' : 'animate'),
		pause_missing = 'pause plugin missing.';

	// utility to format a string with {0}, {1}... placeholders
	function format(str) {
		for (var i = 1; i < arguments.length; i++)
			str = str.replace(new RegExp('\\{' + (i-1) + '}', 'g'), arguments[i]);
		return str;
	}

	// utility to abort with a message to the error console
	function abort() {
		arguments[0] = 'CrossSlide: ' + arguments[0];
		throw new Error(format.apply(null, arguments));
	}

	// utility to parse "from" and "to" parameters
	function parse_position_param(param) {
		var zoom = 1;
		var tokens = param.replace(/^\s*|\s*$/g, '').split(/\s+/);
		if (tokens.length > 3) throw new Error();
		if (tokens[0] == 'center')
			if (tokens.length == 1)
				tokens = ['center', 'center'];
			else if (tokens.length == 2 && tokens[1].match(/^[\d.]+x$/i))
				tokens = ['center', 'center', tokens[1]];
		if (tokens.length == 3)
			zoom = parseFloat(tokens[2].match(/^([\d.]+)x$/i)[1]);
		var pos = tokens[0] + ' ' + tokens[1];
		if (pos == 'left top' || pos == 'top left')
			return { xrel: 0, yrel: 0, zoom: zoom };
		if (pos == 'left center' || pos == 'center left')
			return { xrel: 0, yrel: .5, zoom: zoom };
		if (pos == 'left bottom' || pos == 'bottom left')
			return { xrel: 0, yrel: 1, zoom: zoom };
		if (pos == 'center top' || pos == 'top center')
			return { xrel: .5, yrel: 0, zoom: zoom };
		if (pos == 'center center')
			return { xrel: .5, yrel: .5, zoom: zoom };
		if (pos == 'center bottom' || pos == 'bottom center')
			return { xrel: .5, yrel: 1, zoom: zoom };
		if (pos == 'right top' || pos == 'top right')
			return { xrel: 1, yrel: 0, zoom: zoom };
		if (pos == 'right center' || pos == 'center right')
			return { xrel: 1, yrel: .5, zoom: zoom };
		if (pos == 'right bottom' || pos == 'bottom right')
			return { xrel: 1, yrel: 1, zoom: zoom };
		return {
			xrel: parseInt(tokens[0].match(/^(\d+)%$/)[1]) / 100,
			yrel: parseInt(tokens[1].match(/^(\d+)%$/)[1]) / 100,
			zoom: zoom
		};
	}

	$.fn.crossSlide = function(opts, plan, callback)
	{
		var self = this,
				self_width = this.width(),
				self_height = this.height();

		// must be called on exactly 1 element
		if (self.length != 1)
			abort('crossSlide() must be called on exactly 1 element')

		// saving params for crossSlide.restart
		self.get(0).crossSlideArgs = [ opts, plan, callback ];

		// make working copy of plan
		plan = $.map(plan, function(p) {
			return $.extend({}, p);
		});

		// options with default values
		if (! opts.easing)
			opts.easing = opts.variant ? 'swing' : 'linear';
		if (! callback)
			callback = function() {};

		// first preload all the images, while getting their actual width and height
		(function(proceed) {

			var n_loaded = 0;
			function loop(i, img) {
				// this loop is a for (i = 0; i < plan.length; i++)
				// with independent var i, img (for the onload closures)
				img.onload = function(e) {
					n_loaded++;
					plan[i].width = img.width;
					plan[i].height = img.height;
					if (n_loaded == plan.length)
						proceed();
				}
				img.src = plan[i].src;
				if (i + 1 < plan.length)
					loop(i + 1, new Image());
			}
			loop(0, new Image());

		})(function() { // then proceed

			// check global params
			if (! opts.fade)
				abort('missing fade parameter.');
			if (opts.speed && opts.sleep)
				abort('you cannot set both speed and sleep at the same time.');

			// conversion from sec to ms; from px/sec to px/ms
			var fade_ms = Math.round(opts.fade * 1000);
			if (opts.sleep)
				var sleep = Math.round(opts.sleep * 1000);
			if (opts.speed)
				var speed = opts.speed / 1000,
						fade_px = Math.round(fade_ms * speed);

			// set container css
			self.empty().css({
				overflow: 'hidden',
				padding: 0
			});
			if (! /^(absolute|relative|fixed)$/.test(self.css('position')))
				self.css({ position: 'relative' });
			if (! self.width() || ! self.height())
				abort('container element does not have its own width and height');

			// random sorting
			if (opts.shuffle)
				plan.sort(function() {
					return Math.random() - 0.5;
				});

			// prepare each image
			for (var i = 0; i < plan.length; ++i) {

				var p = plan[i];
				if (! p.src)
					abort('missing src parameter in picture {0}.', i + 1);

				if (speed) { // speed/dir mode

					// check parameters and translate speed/dir mode into full mode
					// (from/to/time)
					switch (p.dir) {
						case 'up':
							p.from = { xrel: .5, yrel: 0, zoom: 1 };
							p.to = { xrel: .5, yrel: 1, zoom: 1 };
							var slide_px = p.height - self_height - 2 * fade_px;
							break;
						case 'down':
							p.from = { xrel: .5, yrel: 1, zoom: 1 };
							p.to = { xrel: .5, yrel: 0, zoom: 1 };
							var slide_px = p.height - self_height - 2 * fade_px;
							break;
						case 'left':
							p.from = { xrel: 0, yrel: .5, zoom: 1 };
							p.to = { xrel: 1, yrel: .5, zoom: 1 };
							var slide_px = p.width - self_width - 2 * fade_px;
							break;
						case 'right':
							p.from = { xrel: 1, yrel: .5, zoom: 1 };
							p.to = { xrel: 0, yrel: .5, zoom: 1 };
							var slide_px = p.width - self_width - 2 * fade_px;
							break;
						default:
							abort('missing or malformed dir parameter in picture {0}.', i+1);
					}
					if (slide_px <= 0)
						abort('impossible animation: either picture {0} is too small or '
							+ 'div is too large or fade duration too long.', i + 1);
					p.time_ms = Math.round(slide_px / speed);

				} else if (! sleep) { // full mode

					// check and parse parameters
					if (! p.from || ! p.to || ! p.time)
						abort('missing either speed/sleep option, or from/to/time params '
							+ 'in picture {0}.', i + 1);
					try {
						p.from = parse_position_param(p.from)
					} catch (e) {
						abort('malformed "from" parameter in picture {0}.', i + 1);
					}
					try {
						p.to = parse_position_param(p.to)
					} catch (e) {
						abort('malformed "to" parameter in picture {0}.', i + 1);
					}
					if (! p.time)
						abort('missing "time" parameter in picture {0}.', i + 1);
					p.time_ms = Math.round(p.time * 1000)
				}

				// precalculate left/top/width/height bounding values
				if (p.from)
					$.each([ p.from, p.to ], function(i, each) {
						each.width = Math.round(p.width * each.zoom);
						each.height = Math.round(p.height * each.zoom);
						each.left = Math.round((self_width - each.width) * each.xrel);
						each.top = Math.round((self_height - each.height) * each.yrel);
					});

				// append the image (or anchor) element to the container
				var img, elm;
				elm = img = $(format('<img src="{0}"/>', p.src));
				if (p.href)
					elm = $(format('<a href="{0}"></a>', p.href)).append(img);
				if (p.onclick)
					elm.click(p.onclick);
				if (p.alt)
					img.attr('alt', p.alt);
				if (p.rel)
					elm.attr('rel', p.rel);
				if (p.href && p.target)
					elm.attr('target', p.target);
				elm.appendTo(self);
			}
			delete speed; // speed mode has now been translated to full mode

			// utility to compute the css for a given phase between p.from and p.to
			// 0: begin fade-in, 1: end fade-in, 2: begin fade-out, 3: end fade-out
			function position_to_css(p, phase) {
				var pos = [ 0, fade_ms / (p.time_ms + 2 * fade_ms),
					1 - fade_ms / (p.time_ms + 2 * fade_ms), 1 ][phase];
				return {
					left: Math.round(p.from.left + pos * (p.to.left - p.from.left)),
					top: Math.round(p.from.top + pos * (p.to.top - p.from.top)),
					width: Math.round(p.from.width + pos * (p.to.width - p.from.width)),
					height: Math.round(p.from.height + pos * (p.to.height-p.from.height))
				};
			}

			// find images to animate and set initial css attributes
			var imgs = self.find('img').css({
				position: 'absolute',
				visibility: 'hidden',
				top: 0,
				left: 0,
				border: 0
			});

			// show first image
			imgs.eq(0).css({ visibility: 'visible' });
			if (! sleep)
				imgs.eq(0).css(position_to_css(plan[0], opts.variant ? 0 : 1));

			// create animation chain
			var countdown = opts.loop;
			function create_chain(i, chainf) {
				// building the chain backwards, or inside out

				if (i % 2 == 0) {
					if (sleep) {
						// single image sleep
						var i_sleep = i / 2,
								i_hide = (i_sleep - 1 + plan.length) % plan.length,
								img_sleep = imgs.eq(i_sleep),
								img_hide = imgs.eq(i_hide);
						var newf = function() {
							callback(i_sleep, img_sleep.get(0));
							img_hide.css('visibility', 'hidden');
							setTimeout(chainf, sleep);
						};
					} else {
						// single image animation
						var i_slide = i / 2,
								i_hide = (i_slide - 1 + plan.length) % plan.length,
								img_slide = imgs.eq(i_slide),
								img_hide = imgs.eq(i_hide),
								time = plan[i_slide].time_ms,
								slide_anim = position_to_css(plan[i_slide],
									opts.variant ? 3 : 2);
						var newf = function() {
							callback(i_slide, img_slide.get(0));
							img_hide.css('visibility', 'hidden');
							img_slide[animate](slide_anim, time, opts.easing, chainf);
						};
					}
				} else {
					// double image animation
					var i_from = Math.floor(i / 2),
							i_to = Math.ceil(i / 2) % plan.length,
							img_from = imgs.eq(i_from),
							img_to = imgs.eq(i_to),
							from_anim = {},
							to_init = { visibility: 'visible' },
							to_anim = {};
					if (i_to > i_from) {
						to_init.opacity = 0;
						to_anim.opacity = 1;
						if (opts.doubleFade)
							from_anim.opacity = 0;
					} else {
						from_anim.opacity = 0;
						if (opts.doubleFade) {
							to_init.opacity = 0;
							to_anim.opacity = 1;
						}
					}
					if (! sleep) {
						// moving images
						$.extend(to_init, position_to_css(plan[i_to], 0));
						if (! opts.variant) {
							$.extend(from_anim, position_to_css(plan[i_from], 3));
							$.extend(to_anim, position_to_css(plan[i_to], 1));
						}
					}
					if ($.isEmptyObject(to_anim)) {
						var newf = function() {
							callback(i_to, img_to.get(0), i_from, img_from.get(0));
							img_to.css(to_init);
							img_from[animate](from_anim, fade_ms, 'linear', chainf);
						};
					} else if ($.isEmptyObject(from_anim)) {
						var newf = function() {
							callback(i_to, img_to.get(0), i_from, img_from.get(0));
							img_to.css(to_init);
							img_to[animate](to_anim, fade_ms, 'linear', chainf);
						};
					} else {
						var newf = function() {
							callback(i_to, img_to.get(0), i_from, img_from.get(0));
							img_to.css(to_init);
							img_to[animate](to_anim, fade_ms, 'linear');
							img_from[animate](from_anim, fade_ms, 'linear', chainf);
						};
					}
				}

				// if the loop option was requested, push a countdown check
				if (opts.loop && i == plan.length * 2 - 2) {
					var newf_orig = newf;
					newf = function() {
						if (--countdown) newf_orig();
					}
				}

				if (i > 0)
					return create_chain(i - 1, newf);
				else
					return newf;
			}
			var animation = create_chain(plan.length * 2 - 1,
				function() { return animation(); });

			// start animation
			animation();
                        self.find('img').pause();
		});
		return self;
	};

	$.fn.crossSlideFreeze = function()
	{
		this.find('img').stop();
	}

	$.fn.crossSlideStop = function()
	{
		this.find('img').stop().remove();
	}

	$.fn.crossSlideRestart = function()
	{
		this.find('img').stop().remove();
		$.fn.crossSlide.apply(this, this.get(0).crossSlideArgs);
	}

	$.fn.crossSlidePause = function()
	{
		if (! $.fn.pause)
			abort(pause_missing);
		this.find('img').pause();
	}

	$.fn.crossSlideResume = function()
	{
		if (! $.fn.pause)
			abort(pause_missing);
		this.find('img').resume();
	}
})();

Open in new window

0
 
FourMatAuthor Commented:
That did it!  

So to help me understand why this works, the self.find('img').pause(); selector looks for the existence of the img tag in the DOM and invokes the pause function as soon as he image is loaded?

Thanks very much for your patience.
0
 
cmalakarCommented:
>>So to help me understand why this works, the self.find('img').pause(); selector looks for the existence of the img tag in the DOM and invokes the pause function as soon as he image is loaded?

yes
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!

  • 13
  • 12
Tackle projects and never again get stuck behind a technical roadblock.
Join Now