Question

I am using the jQuery Cycle (full) Plugin on a page where I am using a container DIV (.content-left) with a width of 75% and a jQuery Cycle slideshow inside of that container. The images inside of that container should be adjusted automatically.

I use:

JS:

$('.slides').cycle({
   fx: 'fade',
   containerResize: 1 // default for jquery.cycle.all
});

HTML:

<div id="content">
   <div class="content-left">
      <div class="slides"> 
          <img src="...">
          <img src="...">
          <!-- etc. -->
      </div>
   </div>
   <div class="content-right">
      some text
   </div>
   <div class="clear"></div>
</div>

CSS:

#content {
   overflow:hidden;
}

#content .content-left {
   width:75%;
   float:left;
}

#content .content-left img {  /* or: .slides img */
   width:100% !important;
   position:relative;
   left:0px;
   top:0px;
   z-index:-2;
}

#content .content-right {
   width:25%;
   float:right;
}

On Page init my wrapping DIV’s (.content-left) height and width get’s adjusted just fine thanks to the containerResize function. However when I resize my browser window, the width and height of the slides stay the same, which is not what I wanted.

containerResize: 0 doesn’t bring the desired effect either (it then ignores the height of the images and adjusts the height of the wrapper to the height of .content-right (and cuts off the image)).

When I am using only an image without loading Cycle at all everything works fine.

Any solutions for that?

Thanks!

Answer 1

Set in JS:

containerResize: 0,
slideResize:   0,

(really!) and then use the trick of transparent image in the container div. See here
for detail.