0

所以我有了这个很棒的插件，它可以通过镜头效果放大图像。到目前为止，它适用于单个图像，但我想要的是对我的 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>

图像缩放 HTML： <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>
4

1 回答 1

2

首先，您的 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 用法，您只需要遵循一些基本的东西。您可以放置​​类和所有内容，但图像的包装器（<a>内部<li>）必须具有大图像的位置作为 href。

要在滑块上进行缩放，您需要在每次滑块转换完成后调用它

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

注意“animationFinished”选项。

于 2013-05-25T08:27:37.620 回答