Question

我正在尝试使用WordPress将zoom functionality添加到flexslider slider。当缩放类添加到图像时，会在网站上创建一个水平滚动条（并且它非常大），但是当删除缩放类时（在加载之前，而不是之后），网站按预期工作（没有溢出）。奇怪的是，每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文件。一切都有效，当从一开始就注释掉缩放类，并且没有设置缩放类的图像。

Answer 1

由于滑块已设置为滑动且未淡化，因此页面的宽度发生了变化。缩放功能绝对定位，并因其定位方式而导致大量溢出。

将custom.js更改为

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

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

Flexslider溢出来自哪里？

1 个答案: