0

我正在尝试将缩放功能添加到flexslider 滑块使用 WordPress将缩放类添加到图像时，会在站点上创建一个水平滚动条（并且它非常大），但是当缩放类被删除（加载之前，而不是之后）时，站点会按预期工作（没有溢出） . 奇怪的是，网站每 10 次左右就会有一次正确加载，没有溢出，一切正常。

见这里： http: //keganquimby.com/adkoa/

HTML/PHP 标记：img 标记输出的上下文 - 我正在遍历图像，并在 src 中输出中等大小的图像，在 data-zoom-image 字段中输出大的图像（就像缩放插件需要的那样） . 然后，在后端，有一个选项可以向图像添加缩放功能，如果选中，我将向图像添加一个“缩放”类（以 jquery 为目标......见下文）

<div id="slider" class="top flexslider">
    <ul class="slides">
        <?php foreach( $images as $image ): ?>
            <li><img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" data-zoom-image="<?php echo $image['url']; ?>" class="<?php if(get_field('enable_zoom', $image['id'])) echo 'zoom';?>"/></li>
        <?php endforeach; ?>
    </ul>
</div>

JS（来自 custom.js）其他文件是 jquery.elevatezoom.js、elevatezoom.jquery.json（用于缩放）和 jquery.flexslider.js（用于滑块）：

jQuery( document ).ready(function($) {
    $('.flexslider').flexslider({
        animation: "slide"
    });

    $('.zoom').elevateZoom({
        zoomType : "lens",
        lensShape : "round",
        lensSize : 200  
    });
});

CSS：添加太长，但它只是默认的 flexslider.css 文件。当缩放类从一开始就被注释掉并且具有缩放类的图像没有样式时，一切正常。

4

1 回答 1

1

由于滑块已设置为滑动而不是渐变，因此页面的宽度正在发生变化。缩放功能是绝对定位的，因为定位的方式造成了大量溢出。

将 custom.js 更改为

    jQuery( document ).ready(function($) {
        $('.flexslider').flexslider({
        animation: "fade"
    });

    $('.zoom').elevateZoom({
        zoomType : "lens",
        lensShape : "round",
        lensSize : 200  
    });
});
于 2013-10-15T03:07:44.510 回答