jquery - Flexslider 溢出从何而来？

Question

我正在尝试添加 zoom functionality到 flexslider slider使用 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(用于 slider ):

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

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

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

Answer 1

由于 slider 已设置为滑动而不是淡入淡出，因此页面的宽度发生了变化。 zoom 函数是绝对定位的，由于定位方式导致大量溢出。

将 custom.js 更改为

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

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