Question

I am writing my first custom function/addon for jQuery, it’s been a lot of fun. basically it will load a bunch of images from an array and create a slider to enable you to pick one from the list and display it as the main image.

in my options I have added an onClick event, but I want to be able to pass variables to this event for the end user to set in the options, such as the image src, so when you click an image the optional onClick function fires and the end user could then return the src of the image clicked, he is my code for a better example, it may be a tad dirty as I haven’t cleaned it and its full of code that needs polishing but it works.

(function($){ 
$.fn.imagePicker = function( options ) { 
    var defaults = {
        width: 398,
        height: 230,
        imageArray: ["/img/news/emailpi.jpg", "/img/news/debit.jpg", "/img/news/aim-high.jpg", "/img/news/Koala.jpg", "/img/news/170217_get_connected.jpg",
                     "/img/news/10.jpg", "/img/news/1000864_street_variations__doors_2.jpg", "/img/news/1005134_ear_defenders.jpg", "/img/news/1080177_magnifying_glass.jpg", "/img/news/160.jpg",
                     "/img/news/161.jpg", "/img/news/162.jpg", "/img/news/163.jpg", "/img/news/2012.jpg", "/img/news/48.jpg",
                     "/img/news/8.jpg", "/img/news/12.jpg", "/img/news/ski.jpg", "/img/news/storm.jpg", "/img/news/tax-img.jpg",],
        show: 10,
        thumb: {
                width:70, 
                height: 60, 
                borderWidth: 1, 
                borderColour: "#CCC", 
                borderStyle: "solid", 
                padding:3
            },
        mainImage: {
                    width: 150, 
                    height:200, 
                    borderColour:"#CCC", 
                    borderStyle:"solid", 
                    padding:3
                },
        leftScroll: 50,
        rightScroll: 50,
        interval: 5,
        onClick: function(){},
        onScrollLeft:function(){},
        onScrollRight:function(){},
        debug: false
    };
    var options = $.extend( true, defaults, options );

    //Preload the images in the array
    ip_preloader( options.imageArray )
    $(this).css({width:options.width, height:options.height, overflow:'hidden'});
    $(this).html( "<div class='ip-main-images' style='text-align:center'></div>\n\
                   <div class='ip-image-menu' style='position:relative; height:"+(options.thumb.height+5)+"px; width:"+( ((options.thumb.width + options.thumb.padding + ( options.thumb.borderWidth*2 ))*options.imageArray.length) )+"px; overflow:hidden;'>\n\
                       <div class='ip-menu-images-overlay' style='width:"+options.width+"px; position:absolute; top:0;'>\n\
                           <div class='ip-left-hotspot' style='background:url(/admin_v2/css/images/white_trans_10x10.png);position:absolute; left:0; top:0; width:"+options.leftScroll+"px; height:"+( options.thumb.height+( options.thumb.borderWidth*2 ) )+"px; z-index:99;'></div>\n\
                           <div class='ip-right-hotspot' style='background:url(/admin_v2/css/images/white_trans_10x10.png);position:absolute; right:0; top:0; width:"+options.rightScroll+"px; height:"+( options.thumb.height+( options.thumb.borderWidth*2 ) )+"px; z-index:99;'></div>\n\
                       </div>\n\
                       <div class='ip-menu-images' style='position:relative; top:0;'>\n\
                       </div>\n\
                   </div>\n\
                   <div class='ip-mouse-pos'></div>" );
    var container = $(this);
    var menu = $(this).find( ".ip-menu-images" );
    var main = $(this).find( ".ip-main-images" );

    main.html( "<img src='"+options.imageArray[0]+"' width='"+options.mainImage.height+"' height='"+options.mainImage.width+"' style='margin:0 auto; width:"+options.mainImage.width+"px' />" );

    for( i=0; i<options.imageArray.length; i++ ){
        menu.append( "<img src='"+options.imageArray[i]+"' style='float:left; margin-right:"+options.thumb.padding+"px; border:"+options.thumb.borderWidth+"px "+options.thumb.borderStyle+" "+options.thumb.borderColour+";' alt='' class='' width='"+options.thumb.width+"' height='"+options.thumb.height+"' />" );
    }

    $(".ip-image-menu img").live("click", function( ){
        var src = $(this).attr("src");
        $(".ip-main-images img").attr("src", src);
        options.onClick( src );
    });
    var leftpos = 0;
    $(".ip-left-hotspot").bind('mouseenter', function() {
    this.iid = setInterval(function() {
       if( leftpos != options.leftScroll ){
           leftpos ++;
           menu.css("left", leftpos); 
           options.onScrollLeft();
        } 
       if(options.debug)$(".ip-mouse-pos").html( "LeftPos: "+menu.css("left") );
        }, options.interval);
    }).bind('mouseleave', function(){
        this.iid && clearInterval(this.iid);
    });


    $(".ip-right-hotspot").bind('mouseenter', function() {
    this.iids = setInterval(function() {
       if( leftpos != "-"+menu.width()){
           leftpos --;
           menu.css("left", leftpos); 
           options.onScrollRight();
        }
       if(options.debug)$(".ip-mouse-pos").html( "LeftPos: "+menu.css("left") );
        }, options.interval);
    }).bind('mouseleave', function(){
        this.iids && clearInterval(this.iids);
    });



    function ip_preloader( imagesArray ) 
    {
        // counter
        var i = 0;
        // create object
        imageObj = new Image();
        // start preloading
        for(i=0; i<=3; i++) 
        {
          imageObj.src=imagesArray[i];
        }
    }
;    }; 
})(jQuery);

if you do a find for (“src”) will jump you to the bit of code where I call options.onClick and I just want to pass the src to that event so the end user has access to it, should they want to populate a hidden form field with the image src etc. And also so I know how it works, as I am struggling to google for it without the correct terminology. (am not even sure if what I am trying to do is called “an event”)

Answer 1

You could use the following:

if(typeof(options.onClick) == 'function'){
    options.onClick(x, y, z);
}

You can just give the parameters you want to the function. JavaScript doesn’t care how many arguments you give the function. You subscriber just neest to specify the parameters in his handler.

This example shows that it works.

var onclick;

onclick = function(a){
    alert(a);
};

onclick('Hellow world', 'I am useless');

So this should work as well:

$('#myElement').imagePicker({
    onclick: function(src){
        alert(src);
    }
});

_{Maybe you could make your example a bit smaller. This bulk of code is a little bit to much.}