Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Problems incorporating Ultimate Fade-in slideshow (v2.4)

  1. #1
    Join Date
    Jul 2012
    Posts
    69
    Thanks
    88
    Thanked 0 Times in 0 Posts

    Default Problems incorporating Ultimate Fade-in slideshow (v2.4)

    1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

    3) Describe problem: I am unable to figure out how to get the slideshow to work on my page. I need the 4th variant on the demo page: -Manual slideshow with custom buttons, persistent description panel, and current image index/ total images info shown. What am I doing wrong?

    Here is a link to the page I am working on: [Removed at User Request]

    Here is the relevant (I think) code:

    Code:
     
    <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
    ***********************************************/
    
    
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow2toggler", //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:/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-1.jpg", "", "", "Adirondack Birding: Barnum Brook from the Jenkins Mountain Trail"],
    		["http:/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-2.jpg", "_new", "Caption 2"],
    		["http:/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-3.jpg"],
    		["http:/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-4.jpg", "", "", "Caption 4"] //<--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: ""
    })
    
    </script>
    
    </head>
    
    <body onLoad="MM_preloadImages('Images/HomeDownRedesign.jpg','Images/AboutDownRedesign.jpg','Images/TrailSystemDown.gif','Images/EventsDownRedesign.jpg','Images/ProgramsDownRedesign.jpg','Images/ExploreDownRedesign.jpg','Images/HoursDownRedesign.jpg','Images/DirectionsDownRedesign.jpg','Images/DonateDownRedesign.jpg')">
    <div class="nav" id="TopWhiteSpace"></div>
    
    <div class="container">
      <div class="header"><!-- end .header -->
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="960" height="102" align="absmiddle" id="FlashID" title="FlashBanner">
          <param name="movie" value="BannerTest6.swf">
          <param name="quality" value="high">
          <param name="wmode" value="opaque">
          <param name="swfversion" value="6.0.65.0">
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
          <param name="expressinstall" value="../Scripts/expressInstall.swf">
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->
          <object data="BannerTest6.swf" type="application/x-shockwave-flash" width="960" height="102" align="absmiddle">
            <!--<![endif]-->
            <param name="quality" value="high">
            <param name="wmode" value="opaque">
            <param name="swfversion" value="6.0.65.0">
            <param name="expressinstall" value="../Scripts/expressInstall.swf">
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object>
    
      </div>
        <div class="nav" id="TopNavBar"><div align="center"><a href="CSSTest9July2012-2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','Images/HomeDownRedesign.jpg',1)"><img src="Images/HomeUpRedesign.jpg" alt="Home Page" name="Image12" width="58" height="19" border="0"></a><a href="AboutVIC.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','Images/AboutDownRedesign.jpg',1)"><img src="Images/AboutUpRedesign.jpg" alt="About the VIC" name="Image13" width="55" height="19" border="0"></a><a href="TrailMapNew.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Trail Map Navigation','','Images/TrailMapDownRedesign.jpg',1)"><img src="Images/TrailMapUpRedesign.jpg" alt="Trail Map" name="Trail Map Navigation" width="78" height="19" border="0"></a><a href="SpringEvents2012.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Events','','Images/EventsDownRedesign.jpg',1)"><img src="Images/EventsUpRedesign.jpg" alt="Events at the VIC" name="Events" width="59" height="19" border="0"></a><a href="Programs.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Programs','','Images/ProgramsDownRedesign.jpg',1)"><img src="Images/ProgramsUpRedesign.jpg" alt="VIC Programs" name="Programs" width="80" height="19" border="0"></a><a href="Bird Walks and Nature Walks.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Explore the Adirondacks','','Images/ExploreDownRedesign.jpg',1)"><img src="Images/ExploreUpRedesign.jpg" alt="Explore the Adirondacks" name="Explore the Adirondacks" width="65" height="19" border="0"></a><a href="Hours.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Hours','','Images/HoursDownRedesign.jpg',1)"><img src="Images/HoursUpRedesign.jpg" alt="Hours" name="Hours" width="56" height="19" border="0"></a><a href="Directions.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Directions','','Images/DirectionsDownRedesign.jpg',1)"><img src="Images/DirectionsUpRedesign.jpg" alt="Directions to the VIC" name="Directions" width="83" height="19" border="0"></a><a href="AboutVIC.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Donate','','Images/DonateDownRedesign.jpg',1)"><img src="Images/DonateUpRedesign.jpg" alt="Donate to the VIC" name="Donate" width="64" height="19" border="0"></a></div></div>
        
        
      <div class="nav" id="BelowNavWhiteSpace"></div>  
        
        <div class="sidebar1">
        <ul class="nav">
          <li><a href="CSSTest9July2012.html">Barnum Brook Trail</a></li>
          <li><a href="AboutVIC.html">Heron Marsh Trail</a></li>
          <li><a href="Programs.html">Boreal Life Trail</a></li>
          <li><a href="SpringEvents2012.htm">Jenkins Mountain Trail</a></li>
          <li><a href="CSSTest9July2012.html">Silviculture  Trail</a></li>
          <li><a href="AboutVIC.html">Woods &amp; Waters  Trail</a></li>
          <li><a href="Programs.html">Black Pond  Trail</a></li>
     
        </ul>
        <p>&nbsp;</p>
        <!-- end .sidebar1 --></div>
      <div class="content">
        <center>
          <h1 align="center" class="header"><font face="Arial, Helvetica, sans-serif" size="2"><b>Birding the Adirondacks<br>Teddy Roosevelt Bird Walk<br>30 June 2012</b></font></h1>
    
    
    <div id="fadeshow2toggler" style="width:468px; text-align:center; margin-top:10px">
    <a href="#" class="prev"><img src="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="Images/right.png" style="border-width:0" /></a>
    </div>
    The slideshow works perfectly in the demo; I just cannot figure out how to incorporate it into my page. I must be leaving something out, or putting in something I shouldn't. Please help! Thanks! ellen
    Last edited by jscheuer1; 07-22-2012 at 04:48 PM. Reason: User Request

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Copy all of the below and paste it over exactly all of what you have in your post:

    Code:
    <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://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-1.jpg", "", "", "Adirondack Birding: Barnum Brook from the Jenkins Mountain Trail"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-2.jpg", "", "", "Caption 2"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-3.jpg", "", "", "Caption 3"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-4.jpg", "", "", "Caption 4"] //<--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"
    })
    
    </script>
    
    </head>
    
    <body onLoad="MM_preloadImages('Images/HomeDownRedesign.jpg','Images/AboutDownRedesign.jpg','Images/TrailSystemDown.gif','Images/EventsDownRedesign.jpg','Images/ProgramsDownRedesign.jpg','Images/ExploreDownRedesign.jpg','Images/HoursDownRedesign.jpg','Images/DirectionsDownRedesign.jpg','Images/DonateDownRedesign.jpg')">
    <div class="nav" id="TopWhiteSpace"></div>
    
    <div class="container">
      <div class="header"><!-- end .header -->
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="960" height="102" align="absmiddle" id="FlashID" title="FlashBanner">
          <param name="movie" value="BannerTest6.swf">
          <param name="quality" value="high">
          <param name="wmode" value="opaque">
          <param name="swfversion" value="6.0.65.0">
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
          <param name="expressinstall" value="../Scripts/expressInstall.swf">
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->
          <object data="BannerTest6.swf" type="application/x-shockwave-flash" width="960" height="102" align="absmiddle">
            <!--<![endif]-->
            <param name="quality" value="high">
            <param name="wmode" value="opaque">
            <param name="swfversion" value="6.0.65.0">
            <param name="expressinstall" value="../Scripts/expressInstall.swf">
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object>
    
      </div>
        <div class="nav" id="TopNavBar"><div align="center"><a href="CSSTest9July2012-2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','Images/HomeDownRedesign.jpg',1)"><img src="Images/HomeUpRedesign.jpg" alt="Home Page" name="Image12" width="58" height="19" border="0"></a><a href="AboutVIC.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','Images/AboutDownRedesign.jpg',1)"><img src="Images/AboutUpRedesign.jpg" alt="About the VIC" name="Image13" width="55" height="19" border="0"></a><a href="TrailMapNew.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Trail Map Navigation','','Images/TrailMapDownRedesign.jpg',1)"><img src="Images/TrailMapUpRedesign.jpg" alt="Trail Map" name="Trail Map Navigation" width="78" height="19" border="0"></a><a href="SpringEvents2012.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Events','','Images/EventsDownRedesign.jpg',1)"><img src="Images/EventsUpRedesign.jpg" alt="Events at the VIC" name="Events" width="59" height="19" border="0"></a><a href="Programs.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Programs','','Images/ProgramsDownRedesign.jpg',1)"><img src="Images/ProgramsUpRedesign.jpg" alt="VIC Programs" name="Programs" width="80" height="19" border="0"></a><a href="Bird Walks and Nature Walks.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Explore the Adirondacks','','Images/ExploreDownRedesign.jpg',1)"><img src="Images/ExploreUpRedesign.jpg" alt="Explore the Adirondacks" name="Explore the Adirondacks" width="65" height="19" border="0"></a><a href="Hours.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Hours','','Images/HoursDownRedesign.jpg',1)"><img src="Images/HoursUpRedesign.jpg" alt="Hours" name="Hours" width="56" height="19" border="0"></a><a href="Directions.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Directions','','Images/DirectionsDownRedesign.jpg',1)"><img src="Images/DirectionsUpRedesign.jpg" alt="Directions to the VIC" name="Directions" width="83" height="19" border="0"></a><a href="AboutVIC.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Donate','','Images/DonateDownRedesign.jpg',1)"><img src="Images/DonateUpRedesign.jpg" alt="Donate to the VIC" name="Donate" width="64" height="19" border="0"></a></div></div>
        
        
      <div class="nav" id="BelowNavWhiteSpace"></div>  
        
        <div class="sidebar1">
        <ul class="nav">
          <li><a href="CSSTest9July2012.html">Barnum Brook Trail</a></li>
          <li><a href="AboutVIC.html">Heron Marsh Trail</a></li>
          <li><a href="Programs.html">Boreal Life Trail</a></li>
          <li><a href="SpringEvents2012.htm">Jenkins Mountain Trail</a></li>
          <li><a href="CSSTest9July2012.html">Silviculture  Trail</a></li>
          <li><a href="AboutVIC.html">Woods &amp; Waters  Trail</a></li>
          <li><a href="Programs.html">Black Pond  Trail</a></li>
     
        </ul>
        <p>&nbsp;</p>
        <!-- end .sidebar1 --></div>
      <div class="content">
        <center>
          <h1 align="center" class="header"><font face="Arial, Helvetica, sans-serif" size="2"><b>Birding the Adirondacks<br>Teddy Roosevelt Bird Walk<br>30 June 2012</b></font></h1>
    
    <div id="fadeshow2"></div>
    <div id="fadeshow2toggler" style="width:468px; text-align:center; margin-top:10px">
    <a href="#" class="prev"><img src="http://some_site.com/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://some_site.com/Images/right.png" style="border-width:0" /></a>
    </div>
    The browser cache may need to be cleared and/or the page refreshed to see changes.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 07-22-2012 at 04:49 PM. Reason: user request
    - John
    ________________________

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

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

    ellenjones6 (07-10-2012)

  4. #3
    Join Date
    Jul 2012
    Posts
    69
    Thanks
    88
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much. I reworked the page. Here is the URL: [Removed at User Request].

    The slide show now works very nicely (thank you so much!!), but I have an additional question. If the user has turned off Javascript, the slide show does not work and only the two arrow buttons show. Is there any way the script can be modified for users who do not have Javascript turned on, to display a static image in place of the slideshow, together with a note telling them to turn on Javascript if they want to see the complete slideshow?

    Also, is there any way to add alt and title text to the images?

    Here is the relevant (I think) code:
    Code:
    <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://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-1.jpg", "", "", "Adirondack Birding: Barnum Brook from the Jenkins Mountain Trail"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-2.jpg", "", "", "Adirondack Wildflowers: Spreading Dogbane blooming near the VIC building"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-3.jpg", "", "", "Adirondack Birding: New trail surfacing on the Hemlock Connector"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-4.jpg", "", "", "Adirondack Wildflowers: Common Wood Sorrel blooming on the Boreal Life Trail"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-5.jpg", "", "", "Adirondack Birding: Saint Regis Mountain from the trail in front of the VIC building"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-6.jpg", "", "", "Adirondack Wildflowers: Partridgberry blooming on the Boreal Life 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"
    })
    
    </script>
    
    </head>
    
    <body onLoad="MM_preloadImages('Images/HomeDownRedesign.jpg','Images/AboutDownRedesign.jpg','Images/TrailSystemDown.gif','Images/EventsDownRedesign.jpg','Images/ProgramsDownRedesign.jpg','Images/ExploreDownRedesign.jpg','Images/HoursDownRedesign.jpg','Images/DirectionsDownRedesign.jpg','Images/DonateDownRedesign.jpg')">
    
    
    <div class="container">
      <div class="header"><img src="Images/Banner102 -- Saint Regis Mountain from the Barnum Brook Trail --  June 2012-1.jpg" width="960" height="102" alt="Saint Regis Mountain from the Barnum Brook Trail (June 2012)" align="absmiddle"><!-- end .header -->
        
    
      </div>
      <div class="nav" id="TopNavBar"><div align="center"><a href="CSSTest9July2012-2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','Images/HomeDownRedesign.jpg',1)"><img src="Images/HomeUpRedesign.jpg" alt="Home Page" id="Image12" width="58" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','Images/AboutDownRedesign.jpg',1)"><img src="Images/AboutUpRedesign.jpg" alt="About the VIC" width="55" height="19" id="Image13" border="0" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Trail Map Navigation','','Images/TrailMapDownRedesign.jpg',1)"><img src="Images/TrailMapUpRedesign.jpg" alt="Trail Map" id="Trail Map Navigation" width="78" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Events','','Images/EventsDownRedesign.jpg',1)"><img src="Images/EventsUpRedesign.jpg" alt="Events at the VIC" id="Events" width="59" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Programs','','Images/ProgramsDownRedesign.jpg',1)"><img src="Images/ProgramsUpRedesign.jpg" alt="VIC Programs" id="Programs" width="80" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Explore the Adirondacks','','Images/ExploreDownRedesign.jpg',1)"><img src="Images/ExploreUpRedesign.jpg" alt="Explore the Adirondacks" id="Explore the Adirondacks" width="65" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Hours','','Images/HoursDownRedesign.jpg',1)"><img src="Images/HoursUpRedesign.jpg" alt="Hours" id="Hours" width="56" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Directions','','Images/DirectionsDownRedesign.jpg',1)"><img src="Images/DirectionsUpRedesign.jpg" alt="Directions to the VIC" id="Directions" width="83" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Donate','','Images/DonateDownRedesign.jpg',1)"><img src="Images/DonateUpRedesign.jpg" alt="Donate to the VIC" id="Donate" width="64" height="19" ></a></div></div>
        
        
      <div class="nav" id="BelowNavWhiteSpace"></div> 
        
        <div class="sidebar1">
        <ul class="nav">
          <li><a href="CSSTest9July2012-5.html">Barnum Brook Trail</a></li>
          <li><a href="CSSTest9July2012-5.html">Heron Marsh Trail</a></li>
          <li><a href="CSSTest9July2012-5.html">Boreal Life Trail</a></li>
          <li><a href="CSSTest9July2012-5.html">Jenkins Mountain Trail</a></li>
          <li><a href="CSSTest9July2012-5.html">Silviculture  Trail</a></li>
          <li><a href="CSSTest9July2012-5.html">Woods &amp; Waters  Trail</a></li>
          <li><a href="CSSTest9July2012-5.html">Black Pond  Trail</a></li>
     
        </ul>
        <p>&nbsp;</p>
        <!-- end .sidebar1 --></div>
      <div class="content">
        <center>
          <h1 align="center" class="header">Birding the Adirondacks<br>Teddy Roosevelt Bird Walk<br>30 June 2012</h1>
    
    <div id="fadeshow2"></div>
    <div id="fadeshow2toggler" style="width:468px; text-align:center; margin-top:10px">
    <a href="#" class="prev"><img src="http://some_site.com/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://some_site.com/Images/right.png" style="border-width:0" /></a>
    </div>
    Thank you again for your help and for your patience! ellen
    Last edited by jscheuer1; 07-22-2012 at 04:44 PM. Reason: user request

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, If you just want titles and alts for accessibility, this will take care of that and the no script behavior you asked for:

    Code:
    <!DOCTYPE html>
    <style type="text/css">
    #fadeshow2 {
    	width: 468px;
    	height: 357px;
    }
    #fadeshow2toggler .noscript {
    	display: none;
    	font: bold 90% sans serif;
    }
    </style>
    <noscript>
    <style type="text/css">
    #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://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-1.jpg", "", "", "Adirondack Birding: Barnum Brook from the Jenkins Mountain Trail"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-2.jpg", "", "", "Adirondack Wildflowers: Spreading Dogbane blooming near the VIC building"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-3.jpg", "", "", "Adirondack Birding: New trail surfacing on the Hemlock Connector"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-4.jpg", "", "", "Adirondack Wildflowers: Common Wood Sorrel blooming on the Boreal Life Trail"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-5.jpg", "", "", "Adirondack Birding: Saint Regis Mountain from the trail in front of the VIC building"],
    		["http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-6.jpg", "", "", "Adirondack Wildflowers: Partridgberry blooming on the Boreal Life Trail"] //<--no trailing comma after very last image element!
    	],
    	titlesAndAlts: [
    		{title: "Title for first Image", alt: "Alternate for first Image"},
    		{title: "Title for second Image", alt: "Alternate for second Image"},
    		{title: "Title for third Image", alt: "Alternate for third Image"},
    		{title: "Title for fourth Image", alt: "Alternate for fourth Image"},
    		{title: "Title for fifth Image", alt: "Alternate for fifth Image"},
    		{title: "Title for sixth Image", alt: "Alternate for sixth Image"},
    	],
    	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>
    
    </head>
    
    <body onLoad="MM_preloadImages('Images/HomeDownRedesign.jpg','Images/AboutDownRedesign.jpg','Images/TrailSystemDown.gif','Images/EventsDownRedesign.jpg','Images/ProgramsDownRedesign.jpg','Images/ExploreDownRedesign.jpg','Images/HoursDownRedesign.jpg','Images/DirectionsDownRedesign.jpg','Images/DonateDownRedesign.jpg')">
    
    
    <div class="container">
      <div class="header"><img src="Images/Banner102 -- Saint Regis Mountain from the Barnum Brook Trail --  June 2012-1.jpg" width="960" height="102" alt="Saint Regis Mountain from the Barnum Brook Trail (June 2012)" align="absmiddle"><!-- end .header -->
        
    
      </div>
      <div class="nav" id="TopNavBar"><div align="center"><a href="CSSTest9July2012-2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','Images/HomeDownRedesign.jpg',1)"><img src="Images/HomeUpRedesign.jpg" alt="Home Page" id="Image12" width="58" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','Images/AboutDownRedesign.jpg',1)"><img src="Images/AboutUpRedesign.jpg" alt="About the VIC" width="55" height="19" id="Image13" border="0" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Trail Map Navigation','','Images/TrailMapDownRedesign.jpg',1)"><img src="Images/TrailMapUpRedesign.jpg" alt="Trail Map" id="Trail Map Navigation" width="78" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Events','','Images/EventsDownRedesign.jpg',1)"><img src="Images/EventsUpRedesign.jpg" alt="Events at the VIC" id="Events" width="59" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Programs','','Images/ProgramsDownRedesign.jpg',1)"><img src="Images/ProgramsUpRedesign.jpg" alt="VIC Programs" id="Programs" width="80" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Explore the Adirondacks','','Images/ExploreDownRedesign.jpg',1)"><img src="Images/ExploreUpRedesign.jpg" alt="Explore the Adirondacks" id="Explore the Adirondacks" width="65" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Hours','','Images/HoursDownRedesign.jpg',1)"><img src="Images/HoursUpRedesign.jpg" alt="Hours" id="Hours" width="56" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Directions','','Images/DirectionsDownRedesign.jpg',1)"><img src="Images/DirectionsUpRedesign.jpg" alt="Directions to the VIC" id="Directions" width="83" height="19" ></a><a href="CSSTest9July2012-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Donate','','Images/DonateDownRedesign.jpg',1)"><img src="Images/DonateUpRedesign.jpg" alt="Donate to the VIC" id="Donate" width="64" height="19" ></a></div></div>
        
        
      <div class="nav" id="BelowNavWhiteSpace"></div> 
        
        <div class="sidebar1">
        <ul class="nav">
          <li><a href="CSSTest9July2012-5.html">Barnum Brook Trail</a></li>
          <li><a href="CSSTest9July2012-5.html">Heron Marsh Trail</a></li>
          <li><a href="CSSTest9July2012-5.html">Boreal Life Trail</a></li>
          <li><a href="CSSTest9July2012-5.html">Jenkins Mountain Trail</a></li>
          <li><a href="CSSTest9July2012-5.html">Silviculture  Trail</a></li>
          <li><a href="CSSTest9July2012-5.html">Woods &amp; Waters  Trail</a></li>
          <li><a href="CSSTest9July2012-5.html">Black Pond  Trail</a></li>
     
        </ul>
        <p>&nbsp;</p>
        <!-- end .sidebar1 --></div>
      <div class="content">
        <center>
          <h1 align="center" class="header">Birding the Adirondacks<br>Teddy Roosevelt Bird Walk<br>30 June 2012</h1>
    
    <div id="fadeshow2"><img src="http://some_site.com/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-1.jpg" alt="whatever" title="whatever"></div>
    <div id="fadeshow2toggler" style="width:468px; text-align:center; margin-top:10px"><span class="noscript">For slideshow, Please Turn on javascript</span>
    <a href="#" class="prev"><img src="http://some_site.com/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://some_site.com/Images/right.png" style="border-width:0" /></a>
    </div>
    If you also want titles and alts for SEO, put all of the images in the fadeshow2 div with their titles and alts. And in the noscript css, set its overflow to auto and its images to display block (from above code, additions highlighted):

    Code:
    <style type="text/css">
    #fadeshow2 {
    	width: 468px;
    	height: 357px;
    }
    #fadeshow2toggler .noscript {
    	display: none;
    	font: bold 90% sans serif;
    }
    </style>
    <noscript>
    <style type="text/css">
    #fadeshow2 {
    	overflow: auto;
    }
    #fadeshow2 img {
    	display: block;
    }
    #fadeshow2toggler * {
    	display: none;
    }
    #fadeshow2toggler .noscript {
    	display: inline;
    }
    </style>
    </noscript>
    Last edited by jscheuer1; 07-22-2012 at 04:49 PM. Reason: user request
    - John
    ________________________

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

  6. #5
    Join Date
    Jul 2012
    Posts
    69
    Thanks
    88
    Thanked 0 Times in 0 Posts

    Smile

    Thank you so much! Your instructions were very clear and worked perfectly.

    I like the way you fixed it to work when JavaScript is disabled, since it then displays the images in a window. I added a link to instructions on how to enable JavaScript in various browsers. I also added title and alt text, following your instructions.

    See what you think.

    I really love this slideshow script! I like the way the slideshow stops when you hover your mouse on it. When the user is ready to go on to the next image, he can simply click on the forward arrow, which is intuitive and even the most technologically-challenged user will be able to figure that out instantly.

    Thank you yet again for your prompt reply and your patience! ellen
    Last edited by jscheuer1; 07-22-2012 at 04:41 PM. Reason: user request

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Great! Seeing it now, it would look a little better for the no script people if the width were increased slightly to account for the vertical scrollbar:

    Code:
    <noscript>
    <style type="text/css">
    #fadeshow2 {
    	overflow: auto;
    	width: 488px;
    }
    #fadeshow2 img {
    	display: block;
    }
    #fadeshow2toggler * {
    	display: none;
    }
    #fadeshow2toggler .noscript {
    	display: inline;
    }
    </style>
    </noscript>
    That way there will be no horizontal scrollbar.
    - John
    ________________________

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

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

    ellenjones6 (07-18-2012)

  9. #7
    Join Date
    Jul 2012
    Posts
    69
    Thanks
    88
    Thanked 0 Times in 0 Posts

    Smile

    Even better!

    Many thanks! ellen
    Last edited by jscheuer1; 07-22-2012 at 04:40 PM. Reason: user request

  10. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Looks good! Only thing now is, you might want all these links to your page removed from the posts. It's a two edged sword. If we leave them, it probably boosts your sites SEO, but at the same time the top results may often be to your posts here on the forum.

    Most people prefer they be removed. I can do that for you if you like.
    - John
    ________________________

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

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

    ellenjones6 (07-22-2012)

  12. #9
    Join Date
    Jul 2012
    Posts
    69
    Thanks
    88
    Thanked 0 Times in 0 Posts

    Default

    Good idea. How would I go about removing them?

  13. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'll do it now. It may take a week or so for them to be removed from search engines. It all depends upon how often they crawl this forum. It's a fairly heavily visited forum, so it might not take that long. If you need more immediate action, you have to contact each search provider. They're usually pretty good about this sort of thing.

    But, as I say, just give it a little time and it will happen automatically once I remove the references from the posts.

    There are a lot, let me know if I missed any.
    Last edited by jscheuer1; 07-22-2012 at 04:50 PM. Reason: add -There are a lot, let me know if I missed any.
    - John
    ________________________

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

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

    ellenjones6 (07-24-2012)

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
  •