Hi

My slideshow comprises 4 images of 960px by 500px which each weigh in at about 350KB. Occasionally in Firefox ( using version 17.0.01 ) my slides display as tiny thumbnails. When it works a slide looks like :

<div class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-2 views_slideshow_cycle_hidden views-row-even" id="views_slideshow_cycle_div_front_page_slideshow-block_1" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 4; opacity: 0; width: 960px; height: 507px;">
   <div class="views-slideshow-cycle-main-frame-row-item views-row views-row-0 views-row-first views-row-odd">
       <div class="views-field views-field-field-slides">
          <div class="field-content">
             <img width="960" height="500" title="Alt" alt="Alt" src="http://thedrupalguy.co.uk/sites/default/files/front-page-slides/2-pure-mountains-Tatiana_0.jpg">
         </div>
      </div>
  </div>
</div>

When it doesn't work the same looks like :

<div class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-4 views_slideshow_cycle_hidden views-row-even" id="views_slideshow_cycle_div_front_page_slideshow-block_3" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 0.213784; width: 19px; height: 24px;">
   <div class="views-slideshow-cycle-main-frame-row-item views-row views-row-0 views-row-first views-row-odd">
     <div class="views-field views-field-field-slides">
         <div class="field-content">
             <img width="960" height="500" title="Alt" alt="Alt" src="http://thedrupalguy.co.uk/sites/default/files/front-page-slides/4-pure-mountains-sign.jpg">
         </div>
     </div>
  </div>
</div>

It looks as though the width and height of the container are being incorrectly set. I wonder if this is because the transition or something is starting before the browser has fully downloaded the image ( or images ? ). Strangely I can't seem to replicate the problem in other browsers.

Any advice appreciated.

Comments

The website is now live here http://www.puremountains.com. I have increased the delay on the initial slide transition to 8 seconds in an attempt to allow the slides to all load ( in case this is the problem ).

Sometimes the first slide displays OK and then all subsequent transitions, including the re-display of the first one, display tiny slides.

Still haven't seen the problem in Chrome or IE.

Am I right in thinking all the images need to be downloaded before the first transition ?

I am encountering the same problem.