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.