Ultimate Fade In Slideshow (3 per page) not working

[Lorel]

I have used this slideshow to display banners on several sites and it works fine. However this time I tried to set up more than one slideshow on a page and it's partially working. I have loaded the changes to CSS file, the JS, all the images and the html page itself. I'm experiencing the following problems:

1. Nothing shows on the actual webpage while on the server when using Safari 5.1.7 (on the mac) (not even the text or header text) but it's fine on my computer. Everything shows if I use Firefox 13.0.1.

2. When using Firefox, only the first 4 of 14 images for fadeshow1 load when hitting the left or right buttons. Does it only work on 4 images?

3. None of the other 2 slideshow left and right buttons work, although the first image loads on each one and the left right arrows are loading.
When I run the page through the WW3 validator it throws an error for using more than one ID for slideshowtoggler, however I don't know where to change this being as it's not set up in my CSS file.

There are other javascripts on the page to run the drop down menu but I removed each of those one by one to see if they are causing a problem and that didn't help.

Here is the page:
http://www.loriswebs.com/-drjyl/patients-gallery.html

Can anyone tell me what is wrong?

[jscheuer1]

You need a separate and unique toggler div for each show:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [100, 75], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/gallery-penny/penny000.jpg"],
["images/gallery-penny/penny001.jpg"],
["images/gallery-penny/penny002.jpg"],
["images/gallery-penny/penny003.jpg"],
["images/gallery-penny/penny004.jpg"],
["images/gallery-penny/penny005.jpg"],
["images/gallery-penny/penny006.jpg"],
["images/gallery-penny/penny007.jpg"],
["images/gallery-penny/penny008.jpg"],
["images/gallery-penny/penny009.jpg"],
["images/gallery-penny/penny010.jpg"],
["images/gallery-penny/penny011.jpg"],
["images/gallery-penny/penny012.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "none",
togglerid: "slideshow1toggler"
})

var mygallery1=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [100, 75], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/gallery-ladycallie/lady-callie000.jpg"],
["images/gallery-ladycallie/lady-callie001.jpg"],
["images/gallery-ladycallie/lady-callie002.jpg"],
["images/gallery-ladycallie/lady-callie003.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "none",
togglerid: "slideshow2toggler"
})

var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [100, 75], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/gallery-cody-sabrina/cody-sabrina00.jpg"],
["images/gallery-cody-sabrina/cody-sabrina01.jpg"],
["images/gallery-cody-sabrina/cody-sabrina02.jpg"],
["images/gallery-cody-sabrina/cody-sabrina03.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "none",
togglerid: "slideshow3toggler"
})

And then in your markup:


<div class="slideshowtn floatleft">
<div id="fadeshow1"></div>
<div id="slideshow1toggler" class="center" style="margin:3px;">
<a href="#" class="prev"><img src="images/left.png" style="border-width:0"></a> <span class="status" style="margin:0; font-weight:bold"></span> <a href="#" class="next"><img src="images/right.png" style="border-width:0"></a></div>
</div><!-- end slideshowtn -->

<br class="clearboth"><br><br>

<h2 class="left">Lady Di & "Callie"</h2>

<div class="slideshowtn floatleft">
<div id="fadeshow2"></div>
<div id="slideshow2toggler" class="center" style="margin:3px;">
<a href="#" class="prev"><img src="images/left.png" style="border-width:0"></a> <span class="status" style="margin:0; font-weight:bold"></span> <a href="#" class="next"><img src="images/right.png" style="border-width:0"></a></div>
</div><!-- end slideshowtn -->

<br class="clearboth"><br><br>

<h2 class="left">Cody Martinez &amp; Sabrina</h2>

<div class="slideshowtn floatleft">
<div id="fadeshow3"></div>
<div id="slideshow3toggler" class="center" style="margin:3px;">
<a href="#" class="prev"><img src="images/left.png" style="border-width:0"></a> <span class="status" style="margin:0 18px; font-weight:bold"></span> <a href="#" class="next"><img src="images/right.png" style="border-width:0"></a></div>
</div><!-- end slideshowtn -->

[Lorel]

Sorry for taking so long to respond. I was bogged down with other projects.

Your suggestion worked great!

Thanks