Ultimate Fade-In won't run

[Gberman]

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

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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/2010%20_friends_conference/2010_florida_friends_conference.html

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

TIA
George

[jscheuer1]

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


<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.

[Gberman]

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/2010_friends_conference/2010_florida_friends_conference.html

Thanks.
GRB

[Nile]

Change:


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

["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!

[Gberman]

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?

[jscheuer1]

Get rid of this from your stylesheet:


.centered { text-align: center;}

Replace it with this:


.descpanelfg {
text-align: center;
}

[Gberman]

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.

[jscheuer1]

I still see this:


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


.descpanelfg {
text-align: center;
}

[Gberman]

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?

[jscheuer1]

Get rid of (highlighted):


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

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


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

[Gberman]

Ahhhh! At last.

Thanks, John.

GRB