Ultimate Fade-in Slideshow -- Font size of captions and centering

[ellenjones6]

1) Script Title: Ultimate Fade-in Slideshow (V2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: In Firefox, the size of the font in the captions is larger than that in the demo. How can I fix it?

Here is the URL of my page and the styles page: http://www.adirondackvic.org/Woods-and-Waters-Trail.html and http://adirondackvic.org/StylesRegularFatFooter5.css (http://adirondackvic.org/StylesRegularFatFooter5.css)

Here is the relevant (I think) code:


<style type="text/css">
#fadeshow2 {
width: 468px;
height: 357px;
}
#fadeshow2toggler .noscript {
display: none;
font: bold 90% Arial, Helvetica, sans-serif;
}
</style>
<noscript>
<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 488px;
}
#fadeshow2 img {
display: block;
}
#fadeshow2toggler * {
display: none;
}
#fadeshow2toggler .noscript {
display: inline;
}
</style>
</noscript>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [468, 357], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-1.jpg", "", "", "Black Pond from the Woods and Waters Trail at the Paul Smiths VIC"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-2.jpg", "", "", "Adirondack Habitats: Coniferous forest along the Woods and Waters Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-3.jpg", "", "", "Adirondack Wetlands: Woods and Waters Trail at the Paul Smiths VIC"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-4.jpg", "", "", "Adirondack Wildflowers: Whorled Wood Aster on the Woods and Waters Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-5.jpg", "", "", "Adirondack Habitats: Long Pond from the Woods and Waters Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-6.jpg", "", "", "Adirondack Wildflowers: Partridge Berry along the Woods and Waters Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-7.jpg", "", "", "Adirondack Habitats: Black Pond from the Woods and Waters Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-8.jpg", "", "", "Adirondack Wildflowers: Wintergreen along the Woods and Waters Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-9.jpg", "", "", "Adirondack Habitats: Long Pond from the Woods and Waters Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-10.jpg", "", "", "Adirondack Wildflowers: Bunchberry and Moss on the Woods and Waters Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-11.jpg", "", "", "Adirondack Habitats: Long Pond from the Woods and Waters Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-12.jpg", "", "", "Fall in the Adirondacks: Along the Woods and Waters Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-13.jpg", "", "", "Adirondack Habitats: Long Pond from the Woods and Waters Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-14.jpg", "", "", "Adirondack Forest Communities: Along the Woods and Waters Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Woods-and-Waters-Trail-15.jpg", "", "", "Adirondack Habitats: Long Pond from the Woods and Waters Trail"]
//<--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: "fadeshow2toggler",
onslide: function(c, i){
var im = c.getElementsByTagName('img')[i], tas = this.setting.titlesAndAlts;
im.title = tas[i].title;
im.alt = tas[i].alt;
}
})

</script>

<h1>Woods and Waters Trail<br>
</h1>
</center>

<center>
<div id="fadeshow2">
</div>
<div id="fadeshow2toggler" style="width:468px; text-align:center; margin-top:10px"><span class="noscript">You have JavaScript turned off in your browser. To view the slideshow, please enable JavaScript. Instructions may be found here: www.enable-javascript.com
</span>
<a href="#" class="prev"><img src="http://Adirondackvic.org/Images/left.png" style="border-width:0" /></a>
<span class="status" style="margin:0 50px; font-weight:bold"></span>
<a href="#" class="next"><img src="http://Adirondackvic.org/Images/right.png" style="border-width:0" /></a>
</div>

What am I doing wrong?

One other thing: I love this slideshow, but both the slideshow itself and the caption need to be centered. The only way I managed to do that was to use the <center> tag, which (of course) I would like to avoid. Do you have a fix? I have tried lots of things and nothing works. Please help! ellen

[FrickenTrevor]

Its the CSS in this part here:



<style type="text/css">
#fadeshow2 {
width: 468px;
height: 357px;
}
#fadeshow2toggler .noscript {
display: none;
font: bold 90% Arial, Helvetica, sans-serif;
}
</style>
<noscript>
<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 488px;
}
#fadeshow2 img {
display: block;
}
#fadeshow2toggler * {
display: none;
}
#fadeshow2toggler .noscript {
display: inline;
}
</style>
</noscript>


I would try writing it like this, and see if it works. Also notice the Font attribute. Have you tried lowering the percentage?


<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 468px;
height: 357px;
}
#fadeshow2toggler .noscript {
display: none;
font: bold 90% Arial, Helvetica, sans-serif;
}

#fadeshow2 img {
display: block;
}

[ellenjones6]

Thank you very much. That seems to have worked to solve the caption size problem. I also lowered the percentage for fonts in the noscript part, which resulted (happily, since that's what I wanted) in a smaller font for the instructions on how to turn on JavaScript.

Now, if someone could tell me how to handle the <center> problem.......

[jscheuer1]

<center> is a problem. It should not be used at all on any page because it's deprecated and inconsistent across browsers.

It's unclear to me what you want to center though. Ah, I think I see. Remove the center tags here (you've got a closing one that has no opening one above it, and then an opening one):


. . . <h1>Woods and Waters Trail<br>
</h1>
</center>

<center>
<div id="fadeshow2"> . . .

and here (the closer for the opener above):


. . . ss="prev"><img src="http://Adirondackvic.org/Images/left.png" style="border-width:0" /></a>
<span class="status" style="margin:0 50px; font-weight:bold"></span>
<a href="#" class="next"><img src="http://Adirondackvic.org/Images/right.png" style="border-width:0" /></a>
</div>

</center>

<p>&nbsp;</p>
<p>The 2.9 mile loop is a backco . . .

Remove all three of those And add these two rules to the styles:


<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 468px;
height: 357px;
margin: 0 auto;
}
#fadeshow2toggler .noscript {
display: none;
font: bold 70% Arial, Helvetica, sans-serif;
margin: 0 auto;
}
</style>

That should do it, unless you also want to center the text inside the captions. For that, add this selector and rule:


.descpanelfg {
text-align: center;
}

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

[ellenjones6]

Thank you so much. I made the changes you suggested. I removed the hated and feared <center> tags. I added the code you suggested.

Now, the slide show is centered (good!) and the text is centered inside the captions (good!). But the buttons are not centered (bad). They appear on the left hand side of the images (parallel to the left edge of the images), when they should be centered under the slide show itself.

Also, when I turn off JavaScript, the images load in a window in the center of the page (good), but the instructions to enable JavaScript now appear on the left margin of the page, when this text should be centered under the image window (bad).

What am I doing wrong? I have tried all sorts of things to remedy these problems, to no avail. ellen

[jscheuer1]

OK, hmm - I don't see any changes to the demo (understandably). I have an idea, but if this doesn't work, put up a demo with these changes (replace the style block from my previous post with this one) and of course remove those three center tags (two closing, one opening):


<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 468px;
height: 357px;
margin: 0 auto;
}
#fadeshow2toggler {
width: 468px;
margin: 0 auto;
text-align: center;
}
#fadeshow2toggler .noscript {
display: none;
font: bold 70% Arial, Helvetica, sans-serif;
}
</style>

The demo can be a separate page if you like, just post the address to it. And that's only if this doesn't take care of it and you want more help.

[ellenjones6]

Yes, I think it is working the way I want to in all my browsers. Many thanks! I added the additional code you suggested to the first style block (in order to center the text in the captions):


#fadeshow2 {
overflow: auto;
width: 468px;
height: 357px;
margin: 0 auto;
}
#fadeshow2toggler {
width: 468px;
margin: 0 auto;
text-align: center;
}
#fadeshow2toggler .noscript {
display: none;
font: bold 70% Arial, Helvetica, sans-serif;
}
.descpanelfg {
text-align: center;
}

I have been wondering about the second style block. What does it do?


Thanks so much for your patience! ellen

[jscheuer1]

If you mean:


<noscript>
<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 488px;
}
#fadeshow2 img {
display: block;
}
#fadeshow2toggler * {
display: none;
}
#fadeshow2toggler .noscript {
display: inline;
}
</style>
</noscript>

It's only used when javascript is unavailable, changing things so that the images may be scrolled and the toggler controls and data are unseen, while the message about enabling javascript is seen.