Skip navigation
Currently Being Moderated

Having trouble with spry image slide show

Sep 9, 2011 11:47 AM

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" "">
<html xmlns="">
<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/SpryThumbnailFilmStr ipPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugi n.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=" otos-1.jpg" alt="fall.jpg" /></a></li>
      <li><a href="images/apples.jpg" title=""><img src=" otos-10.jpg" alt="apples.jpg" /></a></li>
      <li><a href="images/applepie.jpg" title=""><img src=" otos-11.jpg" alt="applepie.jpg" /></a></li>
      <li><a href="images/pumpkinsoup.jpg" title=""><img src=" otos-12.jpg" alt="pumpkinsoup.jpg" /></a></li>
      <li><a href="images/roast.jpg" title="r"><img src=" otos-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"});

  • Currently Being Moderated
    Sep 12, 2011 1:19 PM   in reply to RDISAPIO

    I am having this exact same problem. I read farther ahead in the threads and found other entries, but none of them are saying how they got it to work. My .js files are there on the server I see them but online it does not work. PLEASE HELP how to get this fixed.


    you can see my mess ad maybe help here is a link to it...



    Thanks for any help

    Mark as:
  • Currently Being Moderated
    Sep 20, 2011 10:55 AM   in reply to dianaintexas

    Your spry assets folder MUST be in the same folder as that of your webpage with the slideshow (html, php... whatever)

    Check your folder configuration on the server by clicking on the "Remote Button" on the DW Assets Tab.


    Example 1:  This will not work:

    WEBPAGE HERE:    /server/public/myfolder/slideshow.html

    SPRY ASSETS HERE:  /server/public/SpryAssets/....your javascript files


    Example 2: This will work:

    WEB PAGE HERE:  /server/public/myfolder/slideshow.html

    SPRY ASSETS HERE:  /server/public/myfolder/SpryAssets/....your javascript files


    Hope this helps.

    Mark as:
  • Currently Being Moderated
    Sep 22, 2011 5:21 AM   in reply to G_Raman

    If you create a file, let's call it slides.html, on your hard drive in a folder called, myfolder, once you insert the spry slideshow widget and go to save it your slides.html file, DW will ask you if you also want to save a bunch of scripts. Say yes. That creates a new folder, Spry-UI-1.7, within your folder, myfolder. When you upload to your server, upload the contents of myfolder, which also upload the contents of myfolder/Spry-UI-1.7/ within it.


    Does that help?

    Mark as:
  • Currently Being Moderated
    Oct 5, 2011 4:24 PM   in reply to RDISAPIO

    I'm having the same issue - slide show appearing as list - my directory look ok?Screen shot 2011-10-05 at 4.22.31 PM.png

    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 12:44 AM   in reply to G_Raman

    I have it set up correctly and the site works fine on my testing server, however, it does not work in ANY browser on the web????

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points