Ultimate Fading Slideshow individual slide durations?

[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:

Is it possible to assign a unique slide duration (how long before it changes) to each slide/image? (i.e. first slide holds for 2 sec. before transition, second slide holds for 6 sec. before transition, etc.)

Additionally, is there a way to make the automatic version of the slideshow switch to manual after it stops? (to allow people to click back through after viewing?)

Thanks for all your continued help.

- Michael

[jscheuer1]

Second question first. It already does. After the automatic slideshow stops, it is in manual mode. All you need to do in order for there to be controls is supply them using the togglerid setting (as shown in the second slideshow of the first code block on the demo page) and a division (as outlined for the second demo in the Step 2 code block on the demo page).

The first question is a little trickier. Setup your slideshow like so (I've also included the fadeshow1toggler value for the togglerid setting):

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [940, 314], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["photo1.jpg", "", "", "", 1000, 100],
		["photo2.jpg", "", "", "", 6000, 1000],
		["photo3.jpg", "", "", "", 10000, 5000],
		["photo4.jpg", "", "", ""],
		["photo5.jpg", "", "", ""],
		["photo6.jpg", "", "", ""],
		["photo7.jpg", "", "", ""],
		["photo8.jpg", "", "", ""],
		["photo9.jpg", "", "", ""],
		["photo10.jpg", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "fadeshow1toggler",
	oninit: function(){
			this.setting.dpause = this.setting.displaymode.pause;
			this.setting.dfade = this.setting.fadeduration;
		},
	onslide: function(c, i){
			this.setting.displaymode.pause = this.setting.imagearray[i][4] || this.setting.dpause;
			this.setting.fadeduration = this.setting.imagearray[i][5] || this.setting.dfade;
		}
})

See the numbers in red? They control the pause and fadeduration rate respectively for the individual slides. If they're missing the default values are used. If only one of then is given for a particular slide, it will be pause rate and the fadeduration rate will be the default.

It's the pause rate that governs how long the slide is in view. The fadeduration rate is how long it takes it to fade in. It should always be less than the pause rate.

Then in the body of the page have (like normal - the highlighted part is for the controls):

<div id="fadeshow1"></div>

<div id="fadeshow1toggler" style="width:250px; text-align:center; margin-top:10px">
<input class="prev" type="button" value="&lt">  <span class="status" style="margin:0 50px; font-weight:bold"></span> <input class="next" type="button" value="&gt;">
</div>

If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.

[sonofray]

AWESOME! Haven't had a chance to implement this. But it looks like something even I can do!

I'll update when it's groovin.

Thanks again,

- Michael

[sonofray]

Thanks for everything John. I may be doing this wrong, but when I paste the code changes you provided for controlling individual slide timing, it kills my sticky toolips. I'm probably just doing it wrong. But to recap:

Here's my current fadeshow2 code with STT integration:

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //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: [
		["images/dog.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["images/fruits.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["images/pool.jpg"],
		["images/cave.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: "always",
	togglerid: "fadeshow2toggler",
		oninit: function(){
		jQuery('#' + this.setting.wrapperid + ' .gallerylayer').each(function(){
			jQuery(this).find('img').each(function(i){
				jQuery(this).attr('usemap', '#' + (i + 1));
			});
		});
	}
})

</script>

when I paste over the "onint:" section above (last 9 lines before </script>) with your timing code, it kills my sticky tooltips, but the timing works perfectly as you said. Perhaps my pasting over is the problem? Should I be integrating both sets of "onint:"s?

Here's the link I'm using to get all the pieces working:
http://www.michaelhildebrand.com/OBT...how/index.html

Thanks for everything

[sonofray]

I think I fixed it. Indeed, the paste-over was my problem. I just added the new "oninit" functions to the old, and included the "onslide".

Code on the above link has been updated. (http://www.michaelhildebrand.com/OBT...how/index.html)

BUT ... it seems I cannot do the same with the code below taken from your supplementary page http://www.dynamicdrive.com/dynamici...suppliment.htm

I'm trying to make the description appear in a separate DIV as in the onslide example from the bottom of the page, but I'm having trouble adding the new "onslide" pieces to the ones from your new custom slide timing code.

Here's the code from your sample page:

var mygallery2=new fadeSlideShow({
 wrapperid: "fadeshow2", //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: [
  ["lakeside.jpg", "", "", "A nice day to get the skates out and go ice skating."],
  ["stadium.jpg", "", "", "Every year tens of thousands of visitors visit the Coliseum in Rome."],
  ["winter.jpg", "", "", "This is a rather depressing, yet stunning scene."],
  ["duck.jpg", "", "", "Lets help ensure there will always be places like this for future generations."] //<--no trailing comma after very last 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: "none",
 togglerid: "",
 onslide:function(curimage, index){
  var imagearray=this.setting.imagearray
  jQuery('#info2').html(imagearray[index][3])
}

So, in short I'm just trying to add the external descriptions to the slideshow that is now updated with your custom slide timers.

Thanks for everything. I don't think there could be anything else I COULD add to this sucker!

Blessings,

- Michael

[sonofray]

Fixed it again. (sigh) I'm sorry for the annoyance. I would have deleted these messages, but I wanted others to learn.

Essentially, I just pasted the "onslide" items from the "external description" supplement code, but changed the

jQuery('#info2').html(imagearray[index][3])

to

jQuery('#info2').html(imagearray[i][3])

... changed "index" to "i".

Thanks again for everything. The code as it's being worked on is at http://www.michaelhildebrand.com/OBT...how/index.html

- Michael