如何通过jQuery图像滑块使用此jQuery图像缩放插件？

Question

所以我有一个很棒的插件，它可以通过镜头效果放大图像。到目前为止，它适用于单个图像，但我想要的是将缩放效果应用于我的jQuery滑块中的图像。我已经将此div添加到我的图像滑块中，但当我单击图像时，它会将我带到另一个选项卡，该选项卡仅显示图像。我想得到的图像缩放鼠标悬停效果的所有图像的滑块。在这里你可以找到我刚刚做的工作：Demo here

我的滑块HTML：

<div class="pikachoose">


<ul id="pikame" class="jcarousel-skin-pika">

    <li><a href="http://www.pikachoose.com"><img class="zoom" src="images/slide/1.jpg"/></a><span>This is an example of the basic theme.</span></li>
    <li><a href="http://www.pikachoose.com"><img class="zoom" src="images/slide/2.jpg"/></a>
<span>jCarousel is supported and can be integrated with PikaChoose!</span></li>
</ul>
</div>

图片缩放：<div style="text-align: center;"> <a href="images/slide/2.jpg" class="zoom" ><img src="images/slide/2.jpg" /></a> </div>

Javascript适用于以下两种情况：

<script> // zoom Jquery
$(function(){
    $('.zoom').zoomy({border:'6px solid #fff'});
});




</script>


        <script language="javascript">     //Slider Jquery
        $(document).ready(
            function (){
                $("#pikame").PikaChoose({carousel:true,carouselOptions:{wrap:'circular'}});
            });
    </script>

Answer 1

首先，您的html应该如下所示：

<div class="pikachoose">
    <ul id="pikame" class="jcarousel-skin-pika">
        <li><a href="images/slide/big1.jpg">
            <img src="images/slide/1.jpg"/></a><span>This is an example of the basic theme.</span>
        </li>
        <li><a href="images/slide/big2.jpg">
            <img src="images/slide/2.jpg"/></a><span>jCarousel is supported and can be integrated with PikaChoose!</span>
        </li>
    </ul>
</div>

根据zoomy usage的说法，实际上你只需要遵循一些基本的东西。您可以放置类和所有内容，但图像的包装器( <li>中的<a> )必须将大图像的位置作为href。

为了在滑块上有一个工作的缩放，你需要在每次滑块转换完成后调用它

                $("#pikame").PikaChoose({
                    carousel:true,
                    carouselOptions:{wrap:'circular'},
                    animationFinished : function( e ){
                        e.anchor.zoomy();
                    }
                });

请注意"animationFinished“选项。