Slideshow Spry won't show up in browser
Hello,
I've been trying to add a slideshow to a page and it will show up in the live preview but not in the browser. I've tried two different spry slideshow widgets and have had the same issue with both. I've read through many other discussions here on this problem but none of the solutions discussed have fixed it. I've tried changing the link to the main js file to an absolute link directly to Adobe but then I just get a javascript error when I try to open the page (http://www.ecs.org/html/aboutECS/AwardsWinners-TEST.htm). Right now the image are just showing up as bullets.
Here is the code for the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ECS Award Winners</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic|Open+Sans:400,400italic,600,600italic,700,700italic|Yanone+Kaffeesatz:200,300,400,700' rel='stylesheet' type='text/css'>
<link href="../../css/IssueStyles.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<link href="Spry-UI-1.7/css/SpryImageSlideShow.css" rel="stylesheet" type="text/css">
<style type="text/css">
/* BeginOAWidget_Instance_2141542: #ImageSlideShow */
#ImageSlideShow.ImageSlideShow {
width: 662px;
height: 432px;
border: solid 1px #000000;
}
#ImageSlideShow .ISSClip {
background-color: #000000;
}
/* EndOAWidget_Instance_2141542 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141542" binding="#ImageSlideShow" />
</oa:widgets>
-->
</script>
</head>
<body>
<!--#include file="../../Library/header.html"-->
<table width="1100" border="0" cellspacing="7">
<tr align="center" valign="middle">
<td height="30" colspan="2" align="left">
<span class="pathDarkBlueBig">ECS Award Winners</span>
</td>
</tr>
<tr>
<td width="200" align="left" valign="top"><!--#include file="Library/aboutECS-links.htm" --></td>
<td width="81%" valign="top"><table width="100%" border="0">
<tr>
<td><ul id="ImageSlideShow">
<li><a href="awards/photos/kolderie.jpg"><img src="awards/photos/thumbnails/kolderie.jpg" alt="" /></a></li>
<li><a href="awards/photos/ecs-0260.jpg"><img src="awards/photos/thumbnails/ecs-0260.jpg" alt="" /></a></li>
<li><a href="awards/photos/ecs-0266.jpg"><img src="awards/photos/thumbnails/ecs-0266.jpg" alt="" /></a></li>
<li><a href="awards/photos/exxon-award.jpg"><img src="awards/photos/thumbnails/exxon-award.jpg" alt="" /></a></li>
<li><a href="awards/photos/new-england-award.jpg"><img src="awards/photos/thumbnails/new-england-award.jpg" alt="" /></a></li>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141542: #ImageSlideShow
var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
widgetID: "ImageSlideShow",
injectionType: "replace",
autoPlay: true,
displayInterval: 4000,
transitionDuration: 2000,
componentOrder: ["view", "controls"],
plugIns: [ ]
});
// EndOAWidget_Instance_2141542
</script></td>
</tr>
</table>
<<< --- deleted all the other code for the collabsible panels here -- >>>
<!--#include file="../../Library/footer.html"-->
<script type="text/javascript">
var CollapsiblePanel17 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel17", {contentIsOpen:false});
var CollapsiblePanel18 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel18", {contentIsOpen:false});
var CollapsiblePanel19 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel19", {contentIsOpen:false});
var CollapsiblePanel20 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel20", {contentIsOpen:false});
var CollapsiblePanel22 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel22", {contentIsOpen:false});
</script>
</body>
</html>
Thank you to anyone who can help me figure this out.
AdChoices