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。虽然我可以修改 bjqs，但这将导致不可升级。我只需要有关所需范围的提示即可了解如何直接与插件方法交互。干杯。

编辑：有效的 Cudge：

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

我的第一个想法可能是插件在单击 prev/next 后暴露了一个回调。它似乎没有。如果不出意外，您可以将事件附加到插件创建的 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/

这应该就足够了，除非有其他东西可以触发 prev/next 行为。

于 2014-08-04T06:05:43.320 回答