0

Cloudzoom (CZ) スクリプトを使用して、WP サイトの画像に素敵な効果を追加しています。したがって、複数のサムネイルと、ズーム効果のある大きな画像があります。親指をクリックすると、大きな画像が置き換えられます。ここを参照してください: http://www.starplugins.com/cloudzoom しかし、CZ にはスライドショーがないため、この機能のために独自のスクリプトを追加することにしました。私がしたことは、仕事をするいくつかの関数を作成し、最後にクリックをトリガーすることだけなので、cloudzoom 効果も適用されます。つまり、次、前、再生 - すべてクリック トリガーに基づいています。ここまでは良いのですが、問題はサムネイルがクリックされた場合にスライドショーを停止したいということですが、クリック時に停止イベントを追加することはできません。どうすればこれを回避できますか？

私はjqueryとコーディングが初めてなので、スクリプトが最適化されていない可能性があることに注意してください:)

jQuery(document).ready(function() {
    /* onclick change the current slide */
    /* this is the problematic part */
    jQuery('#vb-thumbs a').click(function() {
        jQuery('.current').removeClass('current');
        jQuery(this).addClass('current');
        /* next comes the slideshow stop event but commented because next and prev also triggers it */
        /*
        if (jQuery(intervalID).length) {
            clearInterval(intervalID);
        }
        */
    });

    /* we set up the manual button navigation */
    function prevImage(){
        var current = jQuery('.current');
        if(jQuery(current).prev().is('a')) {
            jQuery(current).prev('a').trigger('click').addClass('current');
            jQuery(current).removeClass('current');
        }
        else { //if there is no thumb before, jump to the end of the list
            jQuery('#vb-thumbs a').last().trigger('click').addClass('current');
            jQuery(current).removeClass('current');
        }
    };
    function nextImage(){
        var current = jQuery('.current');
        if(jQuery(current).next().is('a')) {
            jQuery(current).next('a').trigger('click').addClass('current');
            jQuery(current).removeClass('current');
        }
        else { //if there is no thumb after, jump to the beginning of the list
            jQuery('#vb-thumbs a').first().trigger('click').addClass('current');
            jQuery(current).removeClass('current');
        }
    };

    /* the button functions */
    jQuery('a.prev').click(function(){
        prevImage();
        clearInterval(intervalID);
    });
    jQuery('a.next').click(function(){
        nextImage();
        clearInterval(intervalID);
    });

    jQuery('a.start').click(function(){
        intervalID = setInterval(nextImage, 3000);
    });
    jQuery('a.stop').click(function(){
        clearInterval(intervalID);
    });
});

編集ここにHTML部分があります

ボタン:

<a class="prev"><img src="/wp-includes/images/icon-prev.jpg" width="10" height="10" alt="Previous" /></a>
<a class="start"><img src="/wp-includes/images/icon-play.jpg" width="10" height="10" alt="Play" /></a>
<a class="stop"><img src="/wp-includes/images/icon-stop.jpg" width="10" height="10" alt="Stop" /></a>
<a class="next"><img src="/wp-includes/images/icon-next.jpg" width="10" height="10" alt="Next" /></a>

サムネイル セクションは次のようになります。

<div id="vb-thumbs">
 <a href="hreftobigimageforclouzoom_1" class="cloudzoom-gallery>thumb image 1</a>
 <a href="hreftobigimageforclouzoom_2" class="cloudzoom-gallery>thumb image 2</a>
 and so on
</div>

アイデアはありますか？

4

3 に答える 3

0

2 つの異なるバインディングを使用できます。clickユーザー クリックとdbclicksetInterval 内のダブルクリックをバインドできます。ダブルクリックすると

  1. setInterval 時間後に次のスライドを再生します。

ユーザーがクリックすると、2 つのことを行います。

  1. 次のスライドを再生
  2. クリア間隔

アニメーションを停止します。

編集：

私が見つけた別の可能な解決策は、event.originalEventの存在を探していることです

$("#vb-thumbs a").click(function(e){
if(e.hasOwnProperty('originalEvent'))
    // User Mouse Click
else
    // Triggered through jQuery/javascript
});
于 2013-02-14T08:15:19.003 に答える
0

Ok。私はあなたのためにフィドルを作成しました。これがあなたにとってうまくいく方法です。

フィドル

これでトリガーにparamsを使用しました。

$('#foo').trigger('custom', ['Custom', 'Event']);
于 2013-02-14T14:02:42.847 に答える
0

最近の投稿で、この回答を書きました。時代遅れかもしれませんが、うまくいくかもしれません。

ここで .divClicked とは何ですか?

ここにあります：

名前空間を使用して、複数のクリック イベントをバインドできます。

いいね：（リンクからコピー）

$(el).bind('click', function() { alert('click 1'); };

$(el).bind('click.divClick', function() { alert('click 2'); };

$(el).unbind('click.divClick');
于 2013-02-14T07:22:16.893 に答える