使用 JQuery 缩放 Bootstrap 旋转木马

Question

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

我相信可能是旋转木马阻止了悬停事件到达 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 缩放 Bootstrap 旋转木马

Using JQuery Zoom with Bootstrap Carousel

jquery

twitter-bootstrap-3