使用JQuery Zoom和Bootstrap Carousel

Question

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

我相信它可能是旋转木马阻止悬停事件到达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' });
});

谢谢高级

--Update--

经过一番挖掘,我发现问题在于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

修复了问题，只需将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>