How to prevent Ultimate Slideshow from reverting to original image.

[AHalsey]

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

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

3) Describe problem: My initial image is a logo with a transparent background. I was so confused for a while when the logo would magically appear on the last image of the slideshow, LOL! I figured out that it must be reverting to the original image and stopping.

Question 1: What would be the code to get the slideshow to stop at the last image of the slideshow instead.

Question 2: Would it be possible to have code that would actually *skip* the first image of the slideshow. Essentially, it would be repeating the images but not the logo.

Thanks so much, I am thrilled with this slideshow that works on iPad, etc etc!
~Andrea

[AHalsey]

I figured it out! I found a thread where someone wanted it to stop on the 2nd image. I modified it to subtract a step instead of add, by adding:

togglerid: "",
oninit: function(){
--this.setting.totalsteps
}

This was added to the end of the code and it happened to work!

[jscheuer1]

Sounds like you've already made some modification(s) to the slideshow or added a style that renders the slideshow's background color transparent. Otherwise that would never happen in the first place. But when the logo appears the first time, it would be against a black background.

So, there may be a different or additional solution to this than what you are asking for.

I'll get back to that. For #1 you can use this modification to the on page call:

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:1, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: function(){
			--this.setting.totalsteps;
		}
})

Addition highlighted. Don't miss the the added comma or the cycles setting (both red).

For #2:

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: "",
	onslide: function(fg, cur){
		var set = this.setting, sel = 'img:first';
		if(cur === 1){
			if(set.$gallerylayers.find(sel).get(0) === set.$gallerylayers.find('a img').get(0)){
				sel = 'a:first';
			}
			set.$gallerylayers.find(sel).remove();
			set.imagearray.shift();
			set.onslide = function(){};
		}
	}
})

Now about that different/additional modification. If instead of the initial first image you made the logo the background for the show, that might work out nicely.

[AHalsey]

Thanks so much for the follow up! I did actually go in and take out all of the background: black; from the js file. That is what allowed the transparencies through (could allow for some seriously cool effects).

I should mention, I totally have no clue what I'm doing with html5 but I do program in PHP so I am at least able to somewhat figure out what is going on.

Here is what I've put together so far - it worked fine with just the "--" code added. However, I'm curious as to how I could also get text to fade in... As you can see from the design I'm hoping to add links to the left. I'm not happy with them being there while the initial logo is displayed. Is there a way I can make a selection of html code pause, then fade in?

Also, how can I alter the code to disable the "pause" when mouseover the image while the slide is on auto.

Thanks for the help!