Question

使用此处的逻辑：Custom Link Trigger for Previous/Next Slide in 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.虽然我可以修改bjqs，这将使不可升级。我只需要了解所需的范围，以了解如何直接与插件方法进行交互。欢呼声。

编辑：有效的Cludge：

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)
     });
});

Answer 1

我的第一个想法是，插件在点击上一个/下一个后显示回调。看来it doesn't。如果不出意外，您可以将事件附加到插件创建的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/

这应该足够了，除非有其他东西可以触发上一个/下一个行为。

如何理解jQuery插件

1 个答案: