jQuery Cycle Plugin scalable DIV and containerResize=1

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!

score 1 · Accepted Answer · edited May 23 '17 at 12:11

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.

edited May 23 '17 at 12:11

Community

1
1

answered May 04 '12 at 00:36

fireb86

1,723
21
35

score 0 · Answer 2 · answered Apr 27 '12 at 12:03

How about trying max-width: 100% !important; on the images, and remove the !important from the width: 100% !important, so that when cycle attempts to resize your slides back to the original width, your max-width definition will take precedence.

If you could provide a jsfiddle, that would also be of great help.

jQuery Cycle Plugin scalable DIV and containerResize=1

2 Answers2