Need help with script enhancement

[MamaGeek]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

It's not really a problem, more like an enhancement I'd like to make and don't know how.

I've properly installed the slideshow script and it works perfectly. I'm also displaying thumbnails of the slideshow photos underneath the show. What I'd like to do is add links to the thumbnails that will advance the slideshow to that photo.

Here is my page:
http://www.mamageekminis.com/schofam...llery=20120512

Can anyone help?

[jscheuer1]

See:

http://www.dynamicdrive.com/forums/blog.php?b=248

[vwphillips]

modification to function(shown in red

	showslide:function(keyword){
		var slideshow=this
		var setting=slideshow.setting
		if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it
			setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
			return
		}
		var totalimages=setting.imagearray.length
		var imgindex=typeof(keyword)=='number'?keyword:(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
			: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
			: Math.min(keyword, totalimages-1)
		var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
		var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
		$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
		$slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
		if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
			clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
			slideshow.showhidedescpanel('hide', 0) //and hide it immediately
		}
		setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
			.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
				clearTimeout(setting.playtimer)
				try{
					setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage)
				}catch(e){
					alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
				}
				if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){
					slideshow.showhidedescpanel('show')
					setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed)
				}
				setting.currentstep+=1
				if (setting.displaymode.type=="auto"){
					if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
						setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
				}
			}) //end callback function
		setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background
		setting.fglayer=setting.bglayer
		setting.bglayer=(setting.bglayer==0)? 1 : 0
		setting.curimage=imgindex
		if (setting.$descpanel){
			setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
			if (setting.imagearray[imgindex][3]) //if this slide contains a description
				setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
		}
		if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
			this.paginatecontrol()
		}
		if (setting.$status) //if status container defined
			setting.$status.html(setting.curimage+1 + "/" + totalimages)
	},

	showhidedescpanel:function(state, animateduration){
		var setting=this.setting
		var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
		setting.$descpanel.stop().animate({top:endpoint}, (typeof animateduration!="undefined"? animateduration : fadeSlideShow_descpanel.slidespeed), function(){
			if (setting.descreveal=="always" && state=="hide")
				setting.$restorebutton.css({visibility:'visible'}) //show restore button
		})
	},

then the slide show can be controlled by in line event calls

<img src="myimage0" onmouseup="mygallery.showslide(0);"  />
<img src="myimage1" onmouseup="mygallery.showslide(1);"  />

where mygallery is the global variable assigned the slide show instance
and the parameter the image number to display

[MamaGeek]

vwphillips, that was absolutely perfect! Just what I was looking for! Thank you so much!

And jscheuer1, although your link didn't have quite what I needed, I appreciate you taking the time to post it. I found some useful info there! Thanks!

[jscheuer1]

No modification to the script is required to use:

mygallery.showslide(#)

or:

mygallery.navigate(#)

The navigate function uses the showslide function, the only difference being that the navigate function (a sort of front end to showslide) cancels auto mode if active.

The relevant code in the original showslide function without modification:

		var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
			: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
			: Math.min(keyword, totalimages-1)

Means that if the keyword isn't next or prev and is a number, that 0 based index image will be shown unless the number is greater than the total 0 based number of images.

As far as I can tell, what Vic has done is short circuit that limitation, such that a number out of range will now cause an error.

So my advice, if you don't want to use Extra Buttons, which by the way can do image buttons (see demo 2 from my blog on it), would be to leave the script alone and do:

<img src="myimage0" onmouseup="mygallery.navigate(0);"  />
<img src="myimage1" onmouseup="mygallery.navigate(1);"  />

Unless you don't want auto mode cancelled, in which case that part of what Vic suggests is fine.

Either way, the slideshow script doesn't need to be modified.

More on Extra Buttons -

It allows you to configure whether or not hitting a nav button will cancel auto mode, as well as the option to provide either pause and/or play buttons or a toggling pause/play button or none of those.

When using it with nav images or buttons it allows for an active state for the nav element of the current image via opacity and/or other style, like border color, etc.

Buttons, whether images or markup can be auto-generated or created manually. Auto-generation is nice if you have tons of images/buttons.

[MamaGeek]

Thanks, John! That worked!

Here's the gallery:
http://www.mamageekminis.com/schofam...llery=20120512

And the page source is built dynamically with php by polling directories named with the year and date of the gallery (if the URL has an invalid gallery number, you get the list of galleries). The captions come from the image IPTC data, and the thumbnails from exif. It's pretty slick! (Now the fun part is over and I need to finish captioning and uploading all the rest of my photos...)