6

我正在尝试使用出色的 Cycle 2 jQuery 插件来设置响应式图片库。画廊将展示纵向和横向图像。

我正在使用居中幻灯片选项（Cycle2 的中心插件： http: //jquery.malsup.com/cycle2/demo/center.php），这似乎会导致 Webkit 浏览器出现问题（如果不是，请尝试调整浏览器窗口的大小）一开始不明显！）

http://goo.gl/NFFZk

绿色背景代表循环容器。

如果没有添加中心选项（ data-cycle-center-horz=true data-cycle-center-vert=true ），整个事情运行良好，请参阅：

http://goo.gl/p76wi

我无法弄清楚导致居中版本出现问题的原因。

图像上的 CSS 代码非常少：

.cycle-slideshow img {
    max-height: 100%;
    max-width: 100%;
}

包含元素的 CSS 在这里

.cycle-slideshow {
    background: green;
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin:20px auto;
    padding:0;
    width:80%;
    }

非常感谢您的帮助！

4

3 回答 3

1

这是另一种选择。

$('.cycle-slideshow').on('cycle-initialized', function( event, opts ) {                
    $(window).trigger('resize');
});
于 2014-10-14T14:59:54.917 回答
0

获取循环插件的未压缩版本：http: //malsup.github.io/jquery.cycle2.center.js

更改第 17 行（将负载添加到触发调整大小的事件列表）：

$(window).on( 'resize orientationchange load', resize );

这将解决 webkit 浏览器上奇怪的随机居中问题。

我在 malsup github 上为此打开了一个问题。希望这将很快进入已发布的版本。

于 2014-01-21T21:36:51.093 回答
0

在查看了您不合作的示例之后，似乎内联样式可能会导致您有些头疼。这是第二张图片（鲤鱼）引用的 HTML：

<img src="http://www.freeimageslive.com/galleries/nature/animals/pics/nishikigoi.jpg" style="position: absolute; top: 0px; left: 0px; z-index: 99; display: block; margin-left: 205px; opacity: 1;" class="cycle-slide cycle-slide-active">

这里要注意的margin-left是设置为 的属性205px。要显示居中的动态或响应式图像，需要进行一些数学运算。您将需要使用偏移量来完成此操作。将图像设置为left: 50%将图像的左侧与容器的中间对齐。到达那里后，您将使用margin-left一半宽度的负值将图像放入真正的中心。（例如，如果图像的宽度是80px，那么您将使用 CSS left: 50%; margin-left: -40px;。

于 2013-04-22T19:53:35.757 回答