PDA

View Full Version : Problems incorporating Ultimate Fade-in slideshow (v2.4)



ellenjones6
07-10-2012, 01:32 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

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



<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

jscheuer1
07-10-2012, 07:26 PM
Copy all of the below and paste it over exactly all of what you have in your post:


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

ellenjones6
07-17-2012, 05:40 PM
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:


<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

jscheuer1
07-17-2012, 08:55 PM
OK, If you just want titles and alts for accessibility, this will take care of that and the no script behavior you asked for:


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


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

ellenjones6
07-18-2012, 09:04 AM
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

jscheuer1
07-18-2012, 11:57 AM
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:


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

ellenjones6
07-18-2012, 08:43 PM
Even better!

Many thanks! ellen

jscheuer1
07-19-2012, 04:46 PM
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.

ellenjones6
07-22-2012, 09:18 AM
Good idea. How would I go about removing them?

jscheuer1
07-22-2012, 04:39 PM
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.

ellenjones6
08-14-2012, 10:21 AM
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 redesigning my site to move from tables to CSS, so I am replacing the old JavaScript with slide shows using the Ultimate Fade-in Slideshow. However, I seem to have introduced a problem in the code and I cannot for the life of me figure out how to correct it. The problem is that the slide show displays correctly in Firefox. However, in IE, the semi-opaque banner at the bottom (which holds the captions) is not wide enough. It stops ten pixels or so short. You can really see it on the first slide in this show.

Here is a link to the page: http://www.adirondackvic.org/BarnumBrook.html

Here is the relevant (I think) code. I had to edit it down because of the length issue:


<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-Barnum-Brook-Trail-1.jpg", "", "", "Gazebo at the entrance to the Barnum Brook Trail at the Paul Smiths VIC"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-2.jpg", "", "", "View of an Adirondack wetland from the Barnum Brook Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-3.jpg", "", "", "Mixed forest on the Barnum Brook Trail at the Paul Smiths VIC"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-4.jpg", "", "", "Adirondack Wildflowers: Wild Columbine on the Barnum Brook Trail"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-5.jpg", "", "", "Along the Barnum Brook Trail at the Paul Smiths VIC"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-6.jpg", "", "", "Adirondack Wildflowers: Foamflower growing on a rock in the middle of Barnum Brook"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-7.jpg", "", "", "Barnum Brook in summer"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-8.jpg", "", "", "Adirondack Wildflowers: Twinflower blooming along the Barnum Brook Trail at the Paul Smiths VIC"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-9.jpg", "", "", "Barnum Brook from the Barnum Brook Trail boardwalk"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-10.jpg", "", "", "Adirondack Trees: Paper Birch along the Barnum Brook Trail at the Paul Smiths VIC"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-11.jpg", "", "", "Along the Barnum Brook Trail -- Fall color in the Adirondacks"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-12.jpg", "", "", "Along the Barnum Brook Trail at the Paul Smiths VIC"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-13.jpg", "", "", "Ferns along the Barnum Brook Trail at the Paul Smiths VIC"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-14.jpg", "", "", "Saint Regis Mountain from the Barnum Brook Trail at the Paul Smiths VIC"],
["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-15.jpg", "", "", "Trees of the Adirondacks: Paper Birch along the Barnum Brook 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>
</head>
<td width="570" align="center" valign="top">
<table width="550" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<center>
<table border=0 cellpadding=0 cellspacing=0>
<tr>

</table>
<h1>&nbsp;</h1>
<h1>Barnum Brook Trail</h1>
<h1><br>
</h1>
</center>

<center>
<div id="fadeshow2">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-1.jpg" alt="Gazebo at the entrance to the Barnum Brook Trail at the Paul Smiths VIC" title="Gazebo at the entrance to the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-2.jpg" alt="View of an Adirondack wetland from the Barnum Brook Trail" title="View of an Adirondack wetland from the Barnum Brook Trail">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-3.jpg" alt="Mixed forest on the Barnum Brook Trail at the Paul Smiths VIC" title="Mixed forest on the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-4.jpg" alt="Adirondack Wildflowers: Wild Columbine on the Barnum Brook Trail" title="Adirondack Wildflowers: Wild Columbine on the Barnum Brook Trail">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-5.jpg" alt="Along the Barnum Brook Trail at the Paul Smiths VIC" title="Along the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-6.jpg" alt="Adirondack Wildflowers: Foamflower growing on a rock in the middle of Barnum Brook" title="Adirondack Wildflowers: Foamflower growing on a rock in the middle of Barnum Brook">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-7.jpg" alt="Barnum Brook in summer" title="Barnum Brook in summer">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-8.jpg" alt="Adirondack Wildflowers: Twinflower blooming along the Barnum Brook Trail at the Paul Smiths VIC" title="Adirondack Wildflowers: Twinflower blooming along the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-9.jpg" alt="Barnum Brook from the Barnum Brook Trail boardwalk" title="Barnum Brook from the Barnum Brook Trail boardwalk">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-10.jpg" alt="Adirondack Trees: Paper Birch along the Barnum Brook Trail at the Paul Smiths VIC" title="Adirondack Trees: Paper Birch along the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-11.jpg" alt="Along the Barnum Brook Trail -- Fall color in the Adirondacks" title="Along the Barnum Brook Trail -- Fall color in the Adirondacks">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-12.jpg" alt="Along the Barnum Brook Trail at the Paul Smiths VIC" title="Along the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-13.jpg" alt="Ferns along the Barnum Brook Trail at the Paul Smiths VIC" title="Ferns along the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-14.jpg" alt="Saint Regis Mountain from the Barnum Brook Trail at the Paul Smiths VIC" title="Saint Regis Mountain from the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-15.jpg" alt="Trees of the Adirondacks: Paper Birch along the Barnum Brook Trail" title="Trees of the Adirondacks: Paper Birch along the Barnum Brook Trail">
],
</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>

</center>

What am I doing wrong here? Please help! Ellen

jscheuer1
08-14-2012, 10:34 AM
The page is in quirks mode because it has no standards invoking DOCTYPE. IE takes this as a license/directive to render the page according to IE 5.5's rendering engine which is way outdated.

To prevent that you need a standards invoking DOCTYPE. That may or may not cause other rendering issues for the rest of the page in IE and/or others. You won't really know until you try it. But seeing as how it renders OK in Firefox, chances are you will be OK. Add the highlighted:


<!DOCTYPE html>
<html>
<head>

<title>Paul Smith's College VIC -- Barnum Brook Trail</title>

<meta name="description" content="The Barnum Brook Trail at the Paul Smiths Visitor Center is a short loop designed to showcase an Adirondack wetland and key wildflowers, trees and birds that flourish in the Adirondacks." >
<meta name="keywords" content="Adirondack, Mountains, Adirondack Mountains, day hikes, Visitor Interpretive Center, Paul Smith's College VIC, Paul S . . .

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

ellenjones6
08-14-2012, 05:56 PM
Ah! Now, I understand.

Yes, I inserted the code you suggested in the (table-based) page and, yes, IE rendered the slideshow correctly, but the rest of the page incorrectly. I could spend a lot of time trying to remedy that, but that doesn't make sense since I am in the process of replacing the table-based layout with a CSS layout. When I finish, I will redeploy all the pages in the site. I have tested the slide show in the redesigned pages (with the code you suggested) and both the slide show and the rest of the page work correctly in IE. So, the problem will go away once I move to the CSS-based layout.

Thank you very much for your prompt reply! ellen