5 Replies Latest reply: Apr 12, 2012 12:44 AM by 210sailor RSS

    Having trouble with spry image slide show

    RDISAPIO Community Member

      Im new to dw and i inserted a image slide show into my index.htm file, it works fine when i preview it in dw cs5.5.  When I try it on a web browser I get a dialog box that says that the spry panel selector .js requires spry widget.js and continues thru several other dialog boxes until my website loads only to see my image slideshow as a list.  Im not sure if its in the code or the support files can anyone help?  I would greatly appreciate it if someone can set me on the right path with this, Thank you in advance.


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Pats IGA Supermarket</title>
      <link href="main.css" rel="stylesheet" type="text/css" />
      <script src="SpryAssets/SpryMenuBar.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/SpryPanelSelector.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/SprySliderPanels.js" type="text/javascript"></script>
      <script src="Spry-UI-1.7/includes/SpryFilmStrip.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/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
      <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
      <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
      <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
      <style type="text/css">
      body {
          background-color: #9D5F16;
      <link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
      <style type="text/css">
      /* BeginOAWidget_Instance_2141543: #frontpageslideshow */


      #frontpageslideshow {
          width: 951px;
          margin: 0px 0px 0px 0px;
          border: solid 0px #aaaaaa;
          background-color: #FFFFFF;
          padding-top: 0px;


      #frontpageslideshow .ISSName {
          top: -24px;
          font-family: Arial, Helvetica, sans-serif;
          font-weight: normal;
          font-size: 18px;
          text-transform: uppercase;
          color: #AAAAAA;


      #frontpageslideshow .ISSSlideTitle {
          top: -18px;
          font-family: Arial, Helvetica, sans-serif;
          font-weight: normal;
          font-size: 12px;
          overflow: hidden;
          color: #AAAAAA;
          text-transform: none;


      #frontpageslideshow .ISSClip {
          height: 361px;
          margin: 0 0px 0px 0px;
          border: solid 0px #ffffff;
          background-color: #ffffff;


      #frontpageslideshow .ISSControls {
          top: 0px;
          height: 361px;


      #frontpageslideshow .FilmStrip {
          height: 0px;
          background-color: #CCCCCC;


      #frontpageslideshow .FilmStripPreviousButton, #frontpageslideshow .FilmStripNextButton {
          width: 10px;
          height: 0px;


      #frontpageslideshow .FilmStripTrack {
          height: 0px;


      #frontpageslideshow .FilmStripContainer {
          height: 0px;


      #frontpageslideshow .FilmStripPanel {
          height: 0px;
          padding-left: 10px;
          margin-right: 0px;


      #frontpageslideshow .FilmStripPanel .ISSSlideLink {
          margin-top: 10px;
          border: solid 1px #AAAAAA;
          background-color: #FFFFFF;


      #frontpageslideshow .FilmStripPanel .ISSSlideLinkRight {
          border: solid 1px #AAAAAA;
          width: 56px;
          height: 47px;
          margin: 4px 4px 4px 4px;


      #frontpageslideshow .FilmStripCurrentPanel .ISSSlideLink {
          background-color: #ffffff;
          border-color: #000000;


      #frontpageslideshow .FilmStripCurrentPanel .ISSSlideLinkRight {
          border-color: #AAAAAA;
      /* EndOAWidget_Instance_2141543 */
      <script type="text/xml">
        <oa:widget wid="2141543" binding="#frontpageslideshow" />




      <div class="container">
        <div class="header"><a href="index.html"><img src="images/logoimg.jpg" width="259" height="136" alt="logo" /></a><img src="images/topheader.jpg" width="701" height="136" alt="header_logo" /><!-- end .header --></div>
        <div class="content">
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="#">Weekly Ad</a>      </li>
            <li><a href="#">Recepies</a></li>
            <li><a href="#" class="MenuBarItemSubmenu">Entertaining</a>
                <li><a href="#">Bakery Brochure</a></li>
                <li><a href="#">Deli Platters</a></li>
                <li><a href="#">Catering Planner</a></li>
            <li><a href="#">Pat's Best</a></li>
            <li><a href="#">Organics</a></li>
            <li><a href="#">Gift Cards</a>      </li>
            <li><a href="#" class="MenuBarItemSubmenu">Departments</a>
                <li><a href="#">Meats</a></li>
                <li><a href="#">Deli</a></li>
                <li><a href="#">Prepared Foods</a></li>
                <li><a href="#">Seafood</a></li>
                <li><a href="#">Produce</a></li>
                <li><a href="#">Bakery</a></li>
          <p> </p>


          <ul id="frontpageslideshow" title="">
            <li><a href="images/fall.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="fall.jpg" /></a></li>
            <li><a href="images/apples.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="apples.jpg" /></a></li>
            <li><a href="images/applepie.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="applepie.jpg" /></a></li>
            <li><a href="images/pumpkinsoup.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="pumpkinsoup.jpg" /></a></li>
            <li><a href="images/roast.jpg" title="r"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="roast.jpg" /></a></li>
          <script type="text/javascript">
      // BeginOAWidget_Instance_2141543: #frontpageslideshow


      var frontpageslideshow = new Spry.Widget.ImageSlideShow("#frontpageslideshow", {
          widgetID: "frontpageslideshow",
          widgetClass: "BasicSlideShowFS",
          injectionType: "replace",
          autoPlay: true,
          displayInterval: 4500,
          transitionDuration: 2000,
          componentOrder: ["name", "title", "view", "controls", "links"],
          sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
          plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin ],
          TFSP: { pageIncrement: 4, wraparound: true }
      // EndOAWidget_Instance_2141543
      Since this is a one-column layout, the .content is not floated.
          Logo Replacement
          An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo.
          Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes.    To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.) <!-- end .content --></div>
        <div class="footer">
          <p>About us  Other Services Employment Contacy us Terms of use Privacy Policy</p>
          <!-- end .footer --></div>
        <!-- end .container --></div>
      <script type="text/javascript">
      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});