在Bootstrap Carousel中使用JQuery Zoom [英] Using JQuery Zoom with Bootstrap Carousel

问题描述

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

I'm trying to use JQuery Zoom plugin (http://www.jacklmoore.com/zoom/) with the Bootstrap Carousel so that each image in the carousel zooms in at cursor position when hovered however I'm unable to get the zoom working after adding both plugins together, the carousel works fine.

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

I believe it could be the carousel preventing the hover event reaching the Zoom plugin.

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

Here is my code for each bootstrap carousel item

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

还有用于启动插件的JS

And the JS to initiate the plugins

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

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

非常感谢

-更新-

经过更多的挖掘，我发现问题出在img响应部分，缩放范围大小分别为0px，0px和不适合图像大小.我该如何解决这个问题?

After a bit more digging I found that the problem lies with the img-responsive part, the zoom span size to 0px, 0px and not fitting to the image size. How might I go about fixing this?

-解决方案-

解决了该问题，只需将跨度切换为div

Fixed the problem, simply switch the span to a div

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

推荐答案

解决了该问题，只需将跨度切换为div

Fixed the problem, simply switch the span to a div

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

这篇关于在Bootstrap Carousel中使用JQuery Zoom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！