Step Carousel Viewer v1.9 not stopping on mouse click

[Selta]

1) Script Title: Step Carousel Viewer v1.9

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem:
I'm using this script on a website. When I use it with <img> or <a> tags, it works most wonderfully. However, I embed YouTube videos in it, using <iframe> tags. The video plays fine, however the issue is that the video gets "carouseled" off after the pause timer elapse is done (i.e. I have mine set to 3 seconds, so you only see three seconds of video before you're autostep'd to the next panel). I tried putting a custom onpanelclick to no avail.
When there is just an <img> or <a> tag in there, the carousel DOES stop like it should on mouseover and on a mouse click.

Hopefully someone can help me out .

[ddadmin]

Hmm this one is a little tricky, as YouTube videos are embedded via IRAME tags that in turn houses a Flash object. Flash objects by default do not make available events occurring inside them to JavaScript. One somewhat passable solution is to stop the video when the mouse rolls over the player (instead of onclick), by overlaying the carousel with a transparent DIV that reacts to the mouseover event. To do this, inside stepcarousel.js, add the code in red to the init() function:

	init:function($, config){
		config.gallerywidth=config.$gallery.width()
		var transdiv = $('<div style="position:absolute; width:100%; height:100%; top:0; left:0; background:white; opacity:0; z-index:1000" />').appendTo(config.$gallery)
		transdiv.bind('mouseover', function(){
			config.autostep.status="stopped"
			stepcarousel.stopautostep(config)
		})

This should work in stopping the carousel from stepping as soon as the user mouses over the carousel.

The other, "real" solution is to embed the youtube video dynamically using JavaScript, then taking advantage of the available functions of Google's Youtube API: https://developers.google.com/youtub..._api_reference That route obviously is a lot more involved.

[Selta]

Hmm this one is a little tricky, as YouTube videos are embedded via IRAME tags that in turn houses a Flash object. Flash objects by default do not make available events occurring inside them to JavaScript. One somewhat passable solution is to stop the video when the mouse rolls over the player (instead of onclick), by overlaying the carousel with a transparent DIV that reacts to the mouseover event. To do this, inside stepcarousel.js, add the code in red to the init() function:

	init:function($, config){
		config.gallerywidth=config.$gallery.width()
		var transdiv = $('<div style="position:absolute; width:100%; height:100%; top:0; left:0; background:white; opacity:0; z-index:1000" />').appendTo(config.$gallery)
		transdiv.bind('mouseover', function(){
			config.autostep.status="stopped"
			stepcarousel.stopautostep(config)
		})

This should work in stopping the carousel from stepping as soon as the user mouses over the carousel.

The other, "real" solution is to embed the youtube video dynamically using JavaScript, then taking advantage of the available functions of Google's Youtube API: https://developers.google.com/youtub..._api_reference That route obviously is a lot more involved.

Oh! Now we're awesomely close to perfection. The only other thing I would "want", and I'm not sure how difficult this would be is to have it also process the mouseOut and resume sliding?

	init:function($, config){
		config.gallerywidth=config.$gallery.width()
		var transdiv = $('<div style="position:absolute; width:100%; height:100%; top:0; left:0; background:white; opacity:0; z-index:1000" />').appendTo(config.$gallery)
		transdiv.bind('mouseover', function(){
			config.autostep.status="stopped"
			stepcarousel.stopautostep(config)
		})
                transdiv.bind('mouseoout', function(){
			config.autostep.status="stopped"
			stepcarousel.stopautostep(config)
		})

Maybe? Just a stab in the dark here. I should go through and read all of the code for this script, but I'm on such an insane time crunch for this page .
Thank you so much for your help thus far!!

[Selta]

Edit: Nevermind, that's dumb. That just un-does what you fixed for me. The only thing I don't like about that is that it stops the carousel even on img's, say a user accidentally crosses their mouse over that DIV. I think that'll be OK though. I enabled pagination so that if they do that, hopefully the little dots will be enough to let them know there's more content. Thank you for your help again

[Selta]

I'm not sure what the rule is on follow up (but unrelated) questions. I would like to add captions to the images and/or IFRAMEs. Is this easily done?

[bernie1227]

You should probably make a new thread for the question, as you are likely to get more attention from it than bumping this thread.

[djr33]

This thread is less than a week old, so if you have more questions on the same topic you're welcome to ask them here. It's unclear to me exactly how connected the new question will be. If it's completely separate from the old question, you can start a new thread. But if you might need to refer back to the answers/posts here, it's fine to just continue in this thread. It's a borderline case. I hope that clarifies the situation.

[jscheuer1]

You could use the onslide event to populate a div with a caption. This is explained in some detail on one of the supplemental pages for this script:

http://www.dynamicdrive.com/dynamici...uppliment3.htm

Scroll down to the section titled:

onslide() event