Attach fancybox/lightbox/idontknowbox function on an element

Question

I'm developing a jquery gallery, and I want to parametrize the highlighter function to support any kind of lightboxes (fancybox for example). In my defaults I did something like:

$.fn.mygallery.defaults = {
    functionHighlighter: null
}

so in the code, creating the item, I'll check this property, and if it's setted to a function, I want to call it on the element:

if ((typeof opt.functionHighlighter) === "function") {
    opt.functionHighlighter.call(link);
}

where link is the anchor element containing the miniature image, with href setted to the original image. In my idea, when the plugin is called, I set the function with:

$("#gallery").mygallery({ functionHighlighter: $.fancybox });

but the "call" on the functionHighlighter executes directly the fancybox, that returns an empty area. What I want to emulate is the execution of

link.fancybox();

that correctly builds the plugin on link. Any ideas?

Answer 1

you need to set these as options:

jQuery.fn.pluginName = function (options) {

var defaults = {

    fancyObject: '',

    fancyPlugin: '',

    fancy: ''
};

var settings = $.extend({}, defaults, options);

return this.each(function () {

    //plugin code

    if (options.fancy){
      $.options.fancyPlugin(options.fancyObject);
    }


});

};

$(selector).pluginName({fancy:true, fancyPlugin: 'fancybox', fancyObject: $(selector)});