CODEWITHSUNDEEP
jquerybjqs
zoneblue
zoneblue

Reputation: 124

How to understand jQuery plugins

Using the logic from here: Custom Link Trigger for Previous/Next Slide in Basic jQuery Slider

I have made thumbnails for Basic jQuery Slider, here: http://www.venusadventures.travel/slidertest.html

My first choice was to try to access the bjqs methods directly, but not knowing how jquery plugins work, (or a whole lot about js) this didnt work :)

//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
        ...
        }
    };

But now i realise i need to also catch the slide change event to update my active thumbnail, si need to go back toplan A. While i could modify bjqs, that would make non-upgradable. I just need a hint about the required scope to understand how to interact with the plugin methods directly. Cheers.

Edit: Cludge that works:

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

Upvotes: 0

Views: 465

Answers (1)

pabo
pabo

Reputation: 635

My first thought was maybe the plugin exposed a callback for after clicking prev/next. It appears that it doesn't. If nothing else, you can attach events to the DOM nodes that the plugin creates:

//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/

This should be sufficient unless there's something else that can trigger the prev/next behavior.

Upvotes: 1

Related Questions