Results 1 to 8 of 8

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

  1. #1
    Join Date
    Jul 2012
    Posts
    31
    Thanks
    41
    Thanked 0 Times in 0 Posts

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

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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-a...ers-Trail.html and http://adirondackvic.org/StylesRegularFatFooter5.css

    Here is the relevant (I think) code:
    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

  2. #2
    Join Date
    Aug 2009
    Location
    charset utf-8
    Posts
    159
    Thanks
    4
    Thanked 5 Times in 5 Posts

    Default

    Its the CSS in this part here:

    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>
    I would try writing it like this, and see if it works. Also notice the Font attribute. Have you tried lowering the percentage?
    Code:
    <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;
    }

  3. The Following User Says Thank You to FrickenTrevor For This Useful Post:

    ellenjones6 (09-01-2012)

  4. #3
    Join Date
    Jul 2012
    Posts
    31
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Default

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

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

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

    Code:
     . . .                 <h1>Woods and Waters Trail<br>
                    </h1>
                  </center>
    			  
    <center>
    <div id="fadeshow2"> . . .
    and here (the closer for the opener above):

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

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

    Code:
    .descpanelfg {
    	text-align: center;
    }
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ellenjones6 (09-01-2012)

  7. #5
    Join Date
    Jul 2012
    Posts
    31
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Question Not quite there yet...

    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

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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.
    Last edited by jscheuer1; 09-02-2012 at 05:07 AM. Reason: detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ellenjones6 (09-02-2012)

  10. #7
    Join Date
    Jul 2012
    Posts
    31
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Thumbs up Work!

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

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

  11. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    If you mean:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ellenjones6 (09-02-2012)

Similar Threads

  1. Ultimate Fade-in slideshow - Font modification
    By ztech123 in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 08-01-2012, 12:21 AM
  2. Resolved Ultimate Fade-in slideshow not centering
    By othelwaite in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 12-13-2010, 04:52 AM
  3. Centering different size images in Ultimate Fade In Slideshow
    By nansaidh in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-26-2010, 12:14 AM
  4. add captions on mouseover to ultimate fade-in slideshow
    By Showdown in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-31-2009, 03:06 AM
  5. Ultimate Fade-in Slideshow centering
    By dwyerm91 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-23-2008, 03:19 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •