Ultimate Fade-In won't run

1) Script Title: Ultimate Fade-In Slideshow (v2.1)

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

3) Describe problem: After successfully running Translucent slideshow, I can't get this script to run. All I see is the user controls. I hope someone will look at the script and help me.

http://www.loxahatcheefriends.com/20...onference.html

The JPEGS and the .js file are in the same folder as the page with the script.

TIA
George

Here in your source code for the page you have two syntax errors (highlighted, with missing commas inserted in red):

Code:

---

<script type="text/javascript">

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: [
                ["DSC_1814.jpg", "", "", "Evan Hirsche, President, National Wildlife Refuge Association delivers keynote address"],
                ["DSC_1817.jpg", "", "", ""],
                ["DSC_1819.jpg"],
                ["DSC_1822.jpg", "", "", "Dudley Edmondson, wildlife photographer. “Connecting with Nature”
Photo journalist on the River of Grass Canoe Expedition
"] //<--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: ""
})


var mygallery2=new fadeSlideShow({
        wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
        dimensions: [600, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
        imagearray: [
                ["DSC_1814.jpg", "", "", "Evan Hirsche, President, National Wildlife Refuge Association delivers keynote address"],
                ["DSC_1817.jpg", "", "", ""],
                ["DSC_1819.jpg"],
                ["DSC_1822.jpg", "", "", "Dudley Edmondson, wildlife photographer.Photo journalist on the River of Grass Canoe Expedition
"] //<--no trailing comma after very last image element!
        ],
        displaymode: {type:'manual', 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"
})

</script>

---

There could also be other problems. Fix those and we shall see.

Thanks, John. You have an eagle's eye!

But, fixing the commas didn't solve the problem. What else?

Please use fixed address:
http://www.loxahatcheefriends.com/20...onference.html

Thanks.
GRB

Change:

Code:

---

                ["DSC_1822.jpg", "", "", "Dudley Edmondson, wildlife photographer. “Connecting with Nature”
Photo journalist on the River of Grass Canoe Expedition
"] //<--no trailing comma after very last image element!

---

To:

Code:

---

                ["DSC_1822.jpg", "", "", "Dudley Edmondson, wildlife photographer. “Connecting with Nature” "+
"Photo journalist on the River of Grass Canoe Expedition"+
""] //<--no trailing comma after very last image element!

---

Thanks, Nile. Something in your comment brought to my attention that I'd used double quotes within double quotes. Getting sloppy, I guess. Soon as I put the internal text in single quotes, everything worked.

Next (last?) question: How do I center the portrait-mode photos so they align with the captions?

Get rid of this from your stylesheet:

Code:

---

.centered {        text-align: center;}

---

Replace it with this:

Code:

---

.descpanelfg {
        text-align: center;
}

---

I must have done this wrong. I don't want to lose ".centered" from my global CSS file, so I put .descpanelfg in an internal stylesheet, and then replaced "centered" in the code.

That didn't help.

I still see this:

Code:

---

<td class="centered" style="width: 649px"><div id="fadeshow2" class="centered"></div>

---

in your source code. You will have to remove those and add this rule:

Code:

---

.descpanelfg {
        text-align: center;
}

---

Sorry, John, I forgot to publish after viewing locally. Now can you see why the portrait photos aren't centered?

Also, is there a way to change the background color?

Get rid of (highlighted):

Code:

---

<div id="fadeshow2" class="descpanelfg"></div>

---

You can change the background color with (add to your stylesheet):

Code:

---

#fadeshow2, #fadeshow2 .gallerylayer {
background-color: green!important;
}

---

Ahhhh! At last.

Thanks, John.

GRB