fadeslideshow - mutiple on same page

**annasue** · 02-09-2013, 04:19 PM

1) Script Title: fadeslideshow

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

3) Describe problem: Please see:

triadproperties.com

I need to replace those 3 slideshows with fadeslideshow since they will not display on an Apple device. I have copied the code and placed it where it needs to go. However, see:

webs2impres.com/test_slide_shows.html

to see what is happening. I used this code successfully on many website but only with one occurence on a page.

**jscheuer1** · 02-09-2013, 04:34 PM

The server:

webs2impres.com

cannot be found. This one:

webs2impress.com

is OK. But has no page:

test_slide_shows.html

on it.

One thing I can tell you is that you need separate and unique ids for each slideshow's div and these each must be reflected in the three on page initializations. You can't have three 'fadeshow1' divs.

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

**annasue** · 02-09-2013, 04:50 PM

It is webs2impress.com/index_test_slideshows.html

**jscheuer1** · 02-09-2013, 05:29 PM

In each of the on page initializations, on their third image, there's an extra " mark, example (highlighted red):

Code:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [205, 164], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images_fading/3322-West-End-pic_out.jpg", "", "", ""],
		["images_fading/Nortel_out.jpg", "", "", ""],
		["images_fading/The-Belvedere.jpg", "", "", """] //<--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: ""
})

By the way, if you have no links or captions you don't need any of those, they can be like:

Code:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [205, 164], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images_fading/3322-West-End-pic_out.jpg"],
		["images_fading/Nortel_out.jpg"],
		["images_fading/The-Belvedere.jpg"] //<--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: ""
})

There could also be other problems, but that much has to be fixed first and may be the only problem.

The browser cache may need to be cleared and/or the page refreshed to see changes.

**annasue** · 02-09-2013, 05:39 PM

Thank you so much! The first and third are now working but not the second. Also, why is the line showing under the slideshows? I do not want that.

**jscheuer1** · 02-09-2013, 05:58 PM

Again, there could still be other problems but:

West-Oak_Commons_out.jpg

is a 404 Not Found. There is a:

West-Oak-Commons_out.jpg

image though, use that.

The browser cache may need to be cleared and/or the page refreshed to see changes.

I don't see a line, unless you mean a blank line. If you do, get rid of the p elements:

Code:

<td width="33%" height="164"><p align="center"><div id="fadeshow1"></div></p></td>
<td width="33%" height="164"><p align="center"><div id="fadeshow2"></div></p></td>
<td width="34%" height="164"><p align="center"><div id="fadeshow3"></div></p></td>

**annasue** · 02-09-2013, 08:10 PM

That was it! Thank you so much for your help.

**annasue** · 02-10-2013, 09:42 PM

Can you tell me why there is a narrow line underneath each slideshow? I have searched for a border property that could be set to black and have checked the table background color. I cannot determine where it is coming from at:

webs2impress.com/index_test_slideshows.html