Ultimate Fadein Slideshow - start on first image click?

[sonofray]

1) Script Title: Ultimate Fade-in Slideshow 2.4

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

3) Describe problem:
I would like to begin my slideshow when the user clicks the first image (or if need be, clicks the "Play" button.).

I have searched for some time and found an old answer (2006) but couldn't begin to understand how to wrap the older code in my current v2.4 franken-code. (I have the slideshow, extra buttons, sticky tooltips on individ. image maps, individ. slide times, etc.)

my demo site is here: http://www.michaelhildebrand.com/OBT/final/index.html

Thanks for your help!

- Michael

[jscheuer1]

For:

(or if need be, clicks the "Play" button.)

Just change:

 . . . s/slide5d.jpg", "", "", "TA2000 Omnibus Transparency lets you determine the types of consolidated reporting you need to oversee and monitor subaccount activity within all of your omnibus distributors.", 500, 500],
		["images/slide5e.jpg", "", "", "TA2000 Omnibus Transparency lets you determine the types of consolidated reporting you need to oversee and monitor subaccount activity within all of your omnibus distributors.", 500, 500],
		["images/slide5f.jpg", "", "", "TA2000 Omnibus Transparency lets you determine the types of consolidated reporting you need to oversee and monitor subaccount activity within all of your omnibus distributors.", 3000, 500],
		["images/slide6a.jpg", "", "", "TA2000 Omnibus Transparency lets you determine the types of consolidated reporting you need to oversee and monitor subaccount activity within all of your omnibus distributors.", 3000,500] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:1, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition . . .

to:

 . . . s/slide5d.jpg", "", "", "TA2000 Omnibus Transparency lets you determine the types of consolidated reporting you need to oversee and monitor subaccount activity within all of your omnibus distributors.", 500, 500],
		["images/slide5e.jpg", "", "", "TA2000 Omnibus Transparency lets you determine the types of consolidated reporting you need to oversee and monitor subaccount activity within all of your omnibus distributors.", 500, 500],
		["images/slide5f.jpg", "", "", "TA2000 Omnibus Transparency lets you determine the types of consolidated reporting you need to oversee and monitor subaccount activity within all of your omnibus distributors.", 3000, 500],
		["images/slide6a.jpg", "", "", "TA2000 Omnibus Transparency lets you determine the types of consolidated reporting you need to oversee and monitor subaccount activity within all of your omnibus distributors.", 3000,500] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:1, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition . . .

And if you also want clicking on the slideshow to start it, also add the highlighted as shown:

 . . . }
	},
	togglerid: "fadeshow2toggler",
		oninit: function(){
		jQuery('#' + this.setting.wrapperid + ' .gallerylayer').each(function(){
			jQuery(this).find('img').each(function(i){
				jQuery(this).attr('usemap', '#' + (i + 1));
			});
		});
		
		
		var s = this.setting, ss = this;
		jQuery('#' + s.togglerid + ' .restart').click(function(e){
			ss.navigate(0);
			s.currentstep = -1;
			s.displaymode.type = 'auto';
			ss.showslide(0);
			e.preventDefault();
		});

		s.$wrapperdiv.click(function(){
			s.ismouseover = false;
			s.$togglerdiv.find('.pauseplay').click();
			s.$wrapperdiv.unbind('click'); // comment out this line to have the slideshow itself continue to act as a pause/play button.
		});

			this.setting.dpause = this.setting.displaymode.pause;
			this.setting.dfade = this.setting.fadeduration;
		},
	onslide: function(c, i){
			this.setting.displ . . .

[sonofray]

The click works, but it seems the "rewind" button no longer functions, other than to pause the slideshow (and is now perpetually "grayed out").

I've changed the code accordingly per your guidance:

	displaymode: {type:'manual', pause:2500, cycles:1, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "none",
	extrabuttons: {pause: 6000, pauseplay: true, pend: '.bob', nextprevresume: false, navfade: 0.65},
	navbut: '<a href="javascript:void(#%i)"><img src="images/buts/%c.gif" alt="%c" title="%c" /></a>',
	onpauseplayswitch: function(pauseplaybuts){
        	var ppstatus = this.setting.$togglerdiv.find('.pauseplaystatus');
		if(pauseplaybuts.hasClass('running')){
			ppstatus.html('running');
		} else {
			ppstatus.html('paused');
		}
	},
	togglerid: "fadeshow2toggler",
		oninit: function(){
		jQuery('#' + this.setting.wrapperid + ' .gallerylayer').each(function(){
			jQuery(this).find('img').each(function(i){
				jQuery(this).attr('usemap', '#' + (i + 1));
			});
		});
		
		
		var s = this.setting, ss = this;
		jQuery('#' + s.togglerid + ' .restart').click(function(e){
			ss.navigate(0);
			s.currentstep = -1;
			s.displaymode.type = 'auto';
			ss.showslide(0);
			e.preventDefault();
		});

		s.$wrapperdiv.click(function(){
			s.ismouseover = false;
			s.$togglerdiv.find('.pauseplay').click();
			s.$wrapperdiv.unbind('click'); // comment out this line to have the slideshow itself continue to act as a pause/play button.
		});
				
			this.setting.dpause = this.setting.displaymode.pause;
			this.setting.dfade = this.setting.fadeduration;

ugh. sorry!

- Michael

[jscheuer1]

Um it's not the restart that's grayed out here, but the back button. Maybe that's what you meant.

Anyways, this seems to work.

Change the displaymode type back to 'auto':

displaymode: {type:'auto', pause:2500, cycles:1, wraparound:false},

And add the highlighted before the code we just added:

		s.$togglerdiv.find('.pauseplay').click();
		s.$wrapperdiv.click(function(){
			s.ismouseover = false;
			s.$togglerdiv.find('.pauseplay').click();
			s.$wrapperdiv.unbind('click'); // comment out this line to have the slideshow itself continue to act as a pause/play button.
		});

I was just thinking that we should probably add something to the pauseplay button to remove the click behavior on the show should the user elect to start the show with the pauseplay button. That is unless you choose to allow clicking on the show to continue to execute the pauseplay function. That might be cool, kind of like a Flash movie. We might even be able to arrange for a big play button to superimpose on the show when hovered in it's paused state and a pause one when it's running, though those would interfere with the tooltips, which incidentally interfere with the mouseover pause of the show. That can probably be fixed by assigning setting.ismouseover = true to the mouseenter of the map/area tags:

		s.$togglerdiv.find('.pauseplay').click();
		s.$wrapperdiv.click(function(){
			s.ismouseover = false;
			s.$togglerdiv.find('.pauseplay').click();
			s.$wrapperdiv.unbind('click'); // comment out this line to have the slideshow itself continue to act as a pause/play button.
		});


		jQuery('map, area').mouseenter(function(){
			s.ismouseover = true;
		});

Oh, and in another matter - If you restart the show in paused mode, the pauseplay button gets out of sync and ceases to function. To fix that add the highlighted:

		var s = this.setting, ss = this;
		jQuery('#' + s.togglerid + ' .restart').click(function(e){
			if(s.displaymode.type === 'manual'){
				s.$togglerdiv.find('.pauseplay').click();
			}
			ss.navigate(0);
			s.currentstep = -1;
			s.displaymode.type = 'auto';
			ss.showslide(0);
			e.preventDefault();
		});

And some of your maps have areas that aren't used on their corresponding images, those extra areas should be removed. Like map 10 has:

  <area shape="circle" coords="417,290,15" href="#" data-tooltip="ROA_people" />

But it's just a blank spot on the corresponding image (images/slide3a.jpg).

[sonofray]

Amazing stuff! Working perfectly... almost. (I updated the link with the current code.)

• Extra image maps ... done. (thanks for the cleanup tip)
• RE: persistent play/pause on slide clicks. I faked a big play button (as you'll see in the updated version) on the first slide. I think I'll let people use the controls in the bottom right from there on. (although the idea of the hovering, flash-like play and pause is WAY cool!). If I get the surface too busy I'll probably lose my user interactively, and they'll miss some info.
• SO glad you caught the out-of-sync play/pause bug! I was going to wait and address that later after I could consistently duplicate it ... and so I wouldn't appear QUITE so needy

The only weird buggy thing left is that any of the slides that have image maps now inherit the map and "mailto:" behavior of the last slide. I'll bet it's something painfully simple. My eyes are getting fuzzy looking at this beast. I'm gonna dream this stuff.

Thanks again for everything, John.

- Michael

[jscheuer1]

I think the problem with the mailto is that there are no closing </map> tags, so the maps all bleed together to a degree, with later maps bleeding up to earlier maps in at least some cases.

[sonofray]

YES! I knew it was going to be something embarrassingly simple. (My designer brain has hit rock bottom ... time for a Red Bull)

Working PERFECTLY!

I was going to ask if it was possible to assign certain slides with automatic "pauses," but I don't think I even want that feature anymore. But of course because I said that, someone will ask for it. If it's no big deal, I'd love to have that in my pocket.

Either way, you are absolutely brilliant! If you can get this designer to mash this much code together and actually have a remote idea what he's doing, you are a true Jedi.

- Michael

[jscheuer1]

Great! And thanks for the vote of confidence.

. . . possible to assign certain slides with automatic "pauses," . . .

I don't understand this request. We already have varying pauses. Do you mean that when a given slide shows up that the show will automatically pause, awaiting user input (like at least hitting the play button, but perhaps ticking off an agree checkbox or giving a password) before continuing?

If so, I'm like 99% sure we can do that. Is that what you're talking about?

[sonofray]

Exactly! Once the slideshow gets to a certain slide(s), it would automatically pause and await action. (Something would have to indicate this like a translucent "play" button appearing on the right, or something similar). I am not certain I will even implement this should I figure it out, but it would be an awesome feature for these "No-flash-but-no-html5-either" slideshows of mine. :-)

I really appreciate your time. (I'm learning a TON). Again, not sure I'll use it this time, but I work for a big financial firm that is both mired in clientele using IE7,8,9 (no decent CSS/HTML5), but also wants to include the iFolks (no Flash) in new marketing efforts. sigh.

Thanks again,

- Michael