使用JQuery Zoom和Bootstrap Carousel

我正在尝试使用带有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( @"~",page.FileName ) )" alt=" " />
    </div>
</div>

解决方法

修正了问题,只需将跨度切换为div即可

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