0

そこで、レンズ効果で画像をズームするこの素晴らしいプラグインを手に入れました。今までは単一の画像で機能していましたが、jQuery スライダーにある画像にズーム効果を適用したいのです。この div を画像スライダーに追加しましたが、画像をクリックすると別のタブが表示され、画像が表示されます。スライダーのすべての画像で、マウスホバー効果で画像ズームを取得したいと考えています。ここで、私が今取り組んでいるものを見つけることができます: デモはこちら

私のスライダー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 に答える