Using jQuery Zoom with the Bootstrap Carousel

Question

I'm trying to use the JQuery Zoom plugin ( http://www.jacklmoore.com/zoom/ ) using the Bootstrap carousel so that each image in the carousel zooms in on the cursor when I hover over it, however I cannot get the zoom to work after adding both plugins together The carousel works great.

I believe this could be a carousel to prevent a hover event from getting into the Zoom plugin.

Here is my code for each bootstrap carousel element

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

And JS to run plugins

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

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

Thanks in advanced

- Update -

, , img, 0px, 0px . ?

- -

​​, div 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

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