How to sync slideshow pics with popup descriptions

[MrZico]

1) Script Title: Ultimate fadeinslideshow

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


3) Describe problem: I love this utility. BUT. I have prepared an indexed list of explanatory text files for the pictures to display in a popup box on user demand.
I cannot work out how to synchronise the images with the descriptions. My instinct tells me to get the variable 'curimage' or 'setting.curimage' out of the file fadeslideshow.js to use in the popup calling function. However, I can't fathom how to do this.

It's clear that I've never programmed in javascript before.
Please help.

[jscheuer1]

There's an undocumented oninit feature to this script which may be set in the on page call, example:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: function(){
		var s = this.setting;
		s.$gallerylayers.bind('click', function(){
			alert(s.curimage);
		});
	}
})

Don't miss the added comma (red) after the togglerid property. Notice the:

alert(s.curimage);

That will fire each time an image is clicked alerting the 0 based index of which image it is. Change the alert to your pop up function. You don't have to bind to a click of the images (the layer container actually here, amounts to the same thing). You could bind to whatever you like:

	oninit: function(){
		var s = this.setting;
		jQuery('#mybutton').bind('click', function(){
			alert(s.curimage);
		});
	}

That would allow you to have a button with the id 'mybutton' to trigger this.

Or simply set a global using the onslide (another undocumented feature) function instead:

	onslide: function(layer, idx){
		window.slideNum = idx;
	}

That will set slideNum to this same zero based index. It will then be available in the global scope, so you could have a button somewhere with this onclick event:

onclick="if(typeof slideNum === 'number') popup(slideNum);"

There are various ways.

[MrZico]

John in USA - many many thanks. I could not have done this in years !

I used the coding bit which you put first, using 'oninit'.
I also tried the second which seemed simpler, i.e. setting a global scope for the index, but I could not fathom out where to put it or what the variable names indicated. It would have been guess work. I am interested to know just for learning purposes, if you have the time.

Anyway, I got a terrific solution in double quick time, for which I'm very grateful.

MrZico (Peter)

[jscheuer1]

Actually, this is the second method:

	oninit: function(){
		var s = this.setting;
		jQuery('#mybutton').bind('click', function(){
			alert(s.curimage);
		});
	}

It would allow you to have a button anywhere on your page:

<input type="button" id="mybutton" value="Get Descriptions">

The third method:

	onslide: function(layer, idx){
		window.slideNum = idx;
	}

allows for a global variable. It can be anything that's not in use. Here I've chosen 'slideNum'. Using that method you may have a button on the page:

<input type="button" onclick="if(typeof slideNum === 'number') alert(slideNum);" value="Get Descriptions">

The first two methods are more efficient.