Skip navigation
Currently Being Moderated

Only Half of my Thumnails show up in Spry Slideshow with Filmstrip

Jun 25, 2012 2:02 PM

Tags: #cs5 #dreamweaver #spry #thumbnails #image_slideshow_with_filmstrip

Hi! I'm really hoping somebody can help me. I've inserted the SPRY UI Image Slideshow into a webpage and only 7 of my 11 thumbnails are showing up. I've made sure to restrict them all to 80 pixels tall but it still didn't work. I tried to take off slicing and instead of only showing 2 thumnails it showed 7 but I'm still missing 4. Help!!


<ul id="ImageSlideShow" title="Competition Headwear Embroidery Examples">

  <li><a href="/Images/Step5/Images/ACUFlag.jpg" title="ACU Camouflage with Tonal Flag">

  <img src="/Images/Step5/Thumbnails/Thumb-ACUFlag.jpg" alt="ACU Camo With Flag" name="acu" width="95" height="80" id="acu"/></a></li>

  <li><a href="/Images/Step5/Images/CRABBOWL.jpg" title="Maryland Crab Bowl">

  <img src="/Images/Step5/Thumbnails/Thumb-CRABBOWL.jpg" alt="Crab Bowl" name="crab" width="87" height="80" id="crab"/></a></li>

  <li><a href="/Images/Step5/Images/CrookedHorn.JPG" title="Crooked Horn Visor Embroidery">

  <img src="/Images/Step5/Thumbnails/Thumb-CrookedHorn.jpg" alt="Crooked Horn" name="crooked" width="80" height="81" id="crooked"/></a></li>

  <li><a href="/Images/Step5/Images/Fabric.JPG" title="Fabric">

  <img src="/Images/Step5/Thumbnails/Thumb-Fabric.jpg" alt="Fabric" name="fabric" width="87" height="80" id="fabric"/></a></li>

  <li><a href="/Images/Step5/Images/Metallic.JPG" title="Examples of Metallic 3-D Embroidery">

  <img src="/Images/Step5/Thumbnails/Thumb-Metallic.jpg" alt="Metallic" name="metallic" width="93" height="80" id="metallic"/></a></li>

  <li><a href="/Images/Step5/Images/NYC.JPG" title="NYC Embroidery">

  <img src="/Images/Step5/Thumbnails/Thumb-NYC.jpg" alt="Up Close Picture of Embroidery" name="nyc" width="80" height="82" id="nyc"/></a></li>

  <li><a href="/Images/Step5/Images/RightFront.JPG" title="Support Our Troops">

  <img src="/Images/Step5/Thumbnails/Thumb-RightFront.jpg" alt="Support Our Troops" name="support" width="96" height="80" id="support"/></a></li>

  <li><a href="/Images/Step5/Images/TeamUtah.jpg" title="Team Utah">

  <img src="/Images/Step5/Thumbnails/Thumb-TeamUtah.jpg" alt="Team Utah" name="fish" width="81" height="80" id="fish"/></a></li>

  <li><a href="/Images/Step5/Images/Wave.JPG" title="PA Mine Resuce Wave Visor">

  <img src="/Images/Step5/Thumbnails/Thumb-Wave.jpg" alt="Wave Visor with Embroidery" name="wave" width="95" height="80" class="content" id="wave"/></a></li>

  <li><a href="/Images/Step5/Images/WeWillNeverForget.JPG" title="We Will NEver Forget">

  <img src="/Images/Step5/Thumbnails/Thumb-WeWillNeverForget.jpg" alt="We Will Never Forget" name="flag" width="83" height="80" id="flag"/></a></li>

  <li><a href="/Images/Step5/Images/Wheeling.JPG" title="Wheeling Railroad">

  <img src="/Images/Step5/Thumbnails/Thumb-Wheeling.jpg" alt="Wheeling" name="wheeling" width="102" height="80" id="wheeling"/></a></li>


<script type="text/javascript">

// BeginOAWidget_Instance_2141543: #ImageSlideShow


var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {

    widgetID: "ImageSlideShow",

    widgetClass: "BasicSlideShowFS",

    injectionType: "replace",

    autoPlay: true,

    displayInterval: 12000,

    transitionDuration: 2000,

    componentOrder: ["name", "title", "view", "controls", "links"],

    sliceMap: { BasicSlideShowFS: "none", ISSSlideLink: "none" },

    plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin, Spry.Widget.ImageSlideShow.TitleSliderPlugin, Spry.Widget.ImageSlideShow.PanAndZoomPlugin ],

    TFSP: { pageIncrement: 8, wraparound: true }


// EndOAWidget_Instance_2141543


  • Currently Being Moderated
    Jun 25, 2012 9:11 PM   in reply to avs4me

    basic_fs.css has been modified to the extent that the widget will not work as it should.


    Unless you have a good understanding of what you are doing, the above mentioned CSS does not have to be touched.


    I suggest that you resurrect the original CSS and the widget will work.



    Mark as:
  • Currently Being Moderated
    Jun 26, 2012 12:01 AM   in reply to avs4me

    The best way is to delete the modified CSS, start a new document called junk.html or similar, install the widget in junk.html and say yes to installing the support files. Test the real page to see if it works after which you can delete junk.html.



    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