jQuery Cycle 插件可扩展 DIV 和 containerResize=1

发布于 2024-12-22 04:32:34 字数 1254 浏览 1 评论 0原文

我在页面上使用 jQuery Cycle（完整）插件，其中使用宽度为 75% 的容器 DIV (.content-left) 和该容器内的 jQuery Cycle 幻灯片。该容器内的图像应该自动调整。

我使用：

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 我的包装 DIV (.content-left) 的高度和宽度得到了很好的调整，这要归功于 containerResize 函数。但是，当我调整浏览器窗口大小时，幻灯片的宽度和高度保持不变，这不是我想要的。

containerResize: 0 也没有带来所需的效果（然后它会忽略图像的高度并将包装器的高度调整为 .content-right 的高度（并剪掉图像））。

当我仅使用图像而不加载 Cycle 时，一切正常。

有什么解决办法吗？

谢谢！

原文

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!

分享到QQ

分享到微博