jquery.fancybox.js with jquery.tabSlideOut.v1.3.js

Question

HELP!

Having problems with running jquery.tabSlideOut.v1.3.js and fancybox. They both work but no together

Fancy box works well here with the slideout DIV commented out http://www.3d-flightcases.co.uk/sk-test/index2.php

but when I add the DIV for tabslideout the fancybox 'pop up' will not work

http://www.3d-flightcases.co.uk/sk-test/index1.php

£50.00 to any one who can solve this for me :-)

Answer 1

The main issue is that the tabSlideOut plugin, apart from very old and not maintained any longer, doesn't offer a callback option so you have to customize them yourself in order to initialize fancybox after the tabSlideOut initialization.

Here some instructions to create a custom callback for the tabSlideOut plugin :

1). Edit your tabSlideOut js file.

Look for these lines at the beginning of the file:

(function ($) {
    $.fn.tabSlideOut = function (callerSettings) {
        var settings = $.extend({
                tabHandle : '.handle',
                ... etc.
                onLoadSlideOut : false
            }, callerSettings || {});

and add your callback option (fancyCallback in my example) after the last option (onLoadSlideOut) like :

(function ($) {
    $.fn.tabSlideOut = function (callerSettings) {
        var settings = $.extend({
                tabHandle : '.handle',
                ... etc.
                onLoadSlideOut : false, //<= notice a comma here
                fancyCallback : function () {} // new setting: custom fancybox callback by picssel.com
        }, callerSettings || {});

2). Create the function to be returned by the fancyCallback option (just added above.)

Scroll to the end of your tabSlideOut js file and find these lines :

(function ($) {
    $.fn.tabSlideOut = function (callerSettings) {
        ....
        .... etc.
        if (settings.action === 'hover') {
            hoverAction();
        }
        if (settings.onLoadSlideOut) {
            slideOutOnLoad();
        };
    }; // closes $.fn.tabSlideOut
})(jQuery);

and just before the curly bracket that closes the $.fn.tabSlideOut function, add the fancybox callback like :

(function ($) {
    $.fn.tabSlideOut = function (callerSettings) {
            ....
            .... etc.
        if (settings.action === 'hover') {
            hoverAction();
        }
        if (settings.onLoadSlideOut) {
            slideOutOnLoad();
        };
        // fancybox callback init by picssel.com
        // iterates through every fancybox selector to create a manual gallery
        if (settings.fancyCallback) {
            var fancygallery = [];
            $(this).find(".fancybox").each(function (i) {
                fancygallery[i] = {
                    href : this.href,
                    title : this.title
                };
                $(this).click(function () {
                    $.fancybox(fancygallery, {
                        // fancybox API options here
                        index : i // this is important
                    });
                    return false;
                });
            });
        } /* END fancybox callback init by picssel.com */           
    }; // closes $.fn.tabSlideOut
})(jQuery);

3). Add the fancyCallback option to your custom tabSlideOut's initialization and set it to true like :

jQuery(document).ready(function ($) {
    $('.slide-out-div').tabSlideOut({
        // API options
        tabHandle : '.handle', //class of the element that will be your tab
        ... etc.
        onLoadSlideOut : true, //<= notice comma here
        fancyCallback : true //<= initialize fancybox
    });
});

See JSFIDDLE, which includes the customized tabSlideOut's callback.

NOTE : I am using fancybix v2.x in this demo, but it should work seamlessly with v1.3.x using the right API options.