使用带有引导轮播的 JQuery Zoom答案

【问题标题】：Using JQuery Zoom with Bootstrap Carousel使用带有引导轮播的 JQuery Zoom
【发布时间】：2015-02-16 00:21:12
【问题描述】：

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

我相信这可能是阻止悬停事件到达 Zoom 插件的轮播。

这是每个引导轮播项目的代码

<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 并且不适合图像大小。我该如何解决这个问题？

--解决方案--

修复了问题，只需将span切换为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 twitter-bootstrap-3

【解决方案1】：

修复了问题，只需将span切换为div

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

【讨论】：