Question

我正在尝试将JQuery Zoom插件（http://www.jacklmoore.com/zoom/）与Bootstrap Carousel一起使用，以便旋转木马中的每个图像在悬停时放大光标位置但是在添加两者之后我无法使缩放工作插件在一起，旋转木马工作正常。

我相信它可能是旋转木马阻止悬停事件到达Zoom插件。

这是我的每个bootstrap轮播项目的代码

<div class="item active">
    <span class='zoom'>
         <img class="img-responsive" src="@Url.Content( Path.Combine( @"~", PathLocations.BrochureImages, page.FileName ) )" alt=" " />
    </span>
</div>

和JS一起启动插件

<script type="text/javascript">
$(function () {
    $('.carousel').carousel({
        interval: 99999,
        pause: false
    });

    $('.zoom').zoom({ on: 'click' });
});

先谢谢

- 更新 -

经过多次挖掘后，我发现问题在于img-responsive部分，缩放范围大小为0px，0px并且不适合图像大小。我该怎么办呢？

- 解决方案 -

解决了问题，只需将范围切换为div

即可

<div class="item active">
    <div class='zoom'>
         <img class="img-responsive" src="@Url.Content( Path.Combine( @"~", PathLocations.BrochureImages, page.FileName ) )" alt=" " />
    </div>
</div>

Answer 1

解决了问题，只需将范围切换为div

即可

<div class="item active">
    <div class='zoom'>
         <img class="img-responsive" src="@Url.Content( Path.Combine( @"~", PathLocations.BrochureImages, page.FileName ) )" alt=" " />
    </div>
</div>

使用JQuery Zoom和Bootstrap Carousel

1 个答案: