jQuery Forum

Why not adjust the height of #test with @media styles?

Hmm, maybe insert a dummy image as the first child and give it similar styles along with visibility:none.  Then tell cycle to ignore it:

I didn't know I could explicitly select the element to cycle. Very handy.

I realise it's a bit late in the day, but in case this helps anyone...

@frankalnzkie - I gave the dummy .gif file the same dimensions as the original slide size (i.e. the maximum size they're going to be shown at).  For some reason I had to reference it using the absolute URL for it to get picked up.

And yes, visibility: none is set in the CSS .loading class.

This is the code that works for me (I'm using thumbnails as nav, so a little more complicated):

HTML

1. <div class="project">
       <div class="mainimg">
       <img class="slide" src="image1.jpg" alt=""  />
       <img class="slide" src="image2.jpg" alt=""  />
       <img class="slide" src="image3.jpg" alt=""  />
       <img class="slide" src="image4.jpg" alt=""  />
     </div>
              
     <div class="thumbs">
       <ul>
         <li class=""><a href="image1.jpg"><img src="image1-120x120.jpg" alt="" /></a></li>
         <li class=""><a href="image2.jpg"><img src="image2-120x120.jpg" alt="" /></a></li>
         <li class=""><a href="image3.jpg"><img src="image3-120x120.jpg" alt="" /></a></li>
         <li class=""><a href="image4.jpg"><img src="image4-120x120.jpg" alt="" /></a></li>
       </ul>
    </div>
   </div><!-- project -->
   

JS (using WP so hence jQuery instead of $)

1. jQuery(document).ready(function() {
   jQuery('.mainimg').prepend('<img class="loading" src="images/loading.gif" >');
   jQuery('.mainimg').cycle({
         slideExpr: '.slide',
         fx: 'fade',
         slideResize: true,
         containerResize: false,
         pager: '.thumbs',
         pagerAnchorBuilder: function(idx, slide) {
           // return selector string for existing anchor
           return '.thumbs li:eq(' + idx + ') a';
         },
         pause: 1
       });
   });
   
   

CSS

1. .mainimg img {
     background: #EEEEEE;
     padding: 2%;
     width: 95% !important;
     height: auto !important;
     max-width: 95%;
     height: auto;
   }
   
   img.loading {
     width: 95% !important;
     height: auto !important;
     max-width: 95%;
     height: auto;
     border: none;
     visibility: none;
   }