0

ここからのロジックの使用: Basic jQuery Slider の前/次のスライドのカスタム リンク トリガー

Basic jQuery Slider のサムネイルを作成しました: http://www.venusadventures.travel/slidertest.html

私の最初の選択は、bjqs メソッドに直接アクセスしようとすることでしたが、jquery プラグインがどのように機能するか (または js に関する多くのこと) を知らなかったため、これは機能しませんでした :)

//my addition 
$('.thumb3').click(function(){
    path-to.go(false,3); //scope problems!!!
});

//bjqs snippits
$.fn.bjqs = function(o) {    
    ...
    var conf_markers = function() {
       // for every slide, create a marker
       $.each($slides, function(key, slide){

       // bind the click event
       marker.on('click','a',function(e){
       e.preventDefault();
       if(!state.animating && state.currentslide !== gotoslide) go(false,gotoslide); //HOW TO ACCESS go()?
    });
    ...
    var go = function(direction, position) {
        if(!state.animating){
        state.animating = true;
        if(position){
            state.nextslide = position;
            state.nextindex = position-1;
        }
        else{
            set_next(direction);
        }
        // fade animation
        ...
        }
    };

しかし、アクティブなサムネイルを更新するには、スライド変更イベントもキャッチする必要があることに気付きました。プラン A に戻る必要があります。bjq を変更することはできますが、アップグレードできなくなります。プラグイン メソッドを直接操作する方法を理解するために必要なスコープについてのヒントが必要です。乾杯。

編集：機能するクラッジ：

jQuery(document).ready(function($){
    $('#slider').bjqs({
        width : 620,
        height : 310,
        automatic : false,
        animtype : 'slide'
    });

    //hide bjqs plain blob markers
    $('ol.bjqs-markers').hide();

    //add thumbnail click handlers
    $('div.thumbcontrol img').each( function(t,tobj) {
        $('ol.bjqs-markers li a').each( function (m,mobj) {
            if (t==m) {
                $(tobj).click(function() {
                    $(mobj).trigger('click');
                    $('div.thumbcontrol img').removeClass('active');
                    $(tobj).addClass('active');
                });
            }
        });
    });

    //add click handlers to prev/next
    $('ul.bjqs-controls a').click( function(){
        setTimeout(function() {
            //find the active native bjqs marker (after sliders own handler completes)
            var m= $('ol.bjqs-markers li.active-marker a').text() - 1;
            $('div.thumbcontrol img').each( function(t,tobj) {
                if (m==t) {
                    $('div.thumbcontrol img').removeClass('active');
                    $(tobj).addClass('active');
                }
            });
        },50)
     });
});
4

1 に答える 1

1

私が最初に考えたのは、プラグインが前/次をクリックした後にコールバックを公開したのではないかということでした。そうではないようです。他に何もなければ、プラグインが作成する DOM ノードにイベントを添付できます。

//attach events to prev/next handles
$('.bjqs-prev').click(function() {
    alert('clicked prev');
});
$('.bjqs-next').click(function() {
    alert('clicked next');
});

http://jsfiddle.net/pabo/7E6xe/

前/次の動作をトリガーできる何かが他にない限り、これで十分です。

于 2014-08-04T06:05:43.320 に答える