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;
   }
   

I know this is old but hopefully this can help someone else in the future, I believe what malsup meant was to use it like this:

I forgot to mention above that if you are cycling divs instead of imgs you'll also need to update the js @vengiss listed. Using the HTML from above (in which the placeholder img is *not* in a div):

Hello

      I've been keeping track of this forum as it deals with an issue I have with reactive web design and the cycle plugin. I've done everything mentioned here and now the images are finally fluid... however I seem to have a problem with the container as now it has a height of 0 at all times unless there is something to fill up the page on which it was posted then it just floats over that content also the images seem to overflow out of the container. Any way to fix this and keep it dynamic?
      I don't want to set a fixed height for the container as it is supposed to be presented on mobile devices. Here is the code:

CSS:

1. #jse31{
2.       margin: auto;
3. }
4. .cycleslide {
5.       width: 100% !important;
6. }
7. .cycleslide img {
       width: auto;
       max-width: 100%;
       height: auto;
8. }

JS:

1. var $JSE = jQuery.noConflict();
   $JSE(document).ready(function() {
           $MRPJSE(#jse31).cycle(
               {
                   slideResize: false,
                   containerResize: false
               }
           );
   });

HTML:

1. <div id="jse31">
2.       <div class="cycleslide">
3.             <img src="pics/big/at1.jpg" border="none" />
   
4.       </div>     
5.       <div class="cycleslide">
6.             <img src="pics/big/at2.jpg" border="none" />
   
7.       </div>
8.       <div class="cycleslide">
9.             <img src="pics/big/at3.jpg" border="none" />
   
10.       </div>
11. </div>

      Now if there is some text on the page enough to fill a whole page then container jse31 will float over the text obstructing it, if there is no text and the div is inside an empty rwd element then the pictures will look like they are being cut off at the bottom and only like 10px height of the images will be shown, the width however will shrink and expand fluidly without any problems resizing the rwd element. 

Edit: Nevermind found it I forgot to enter the placeholder image, but I wonder why does it make a difference? Is it because that image isn't processed and therefore sets the attributes for the container?