带有jquery.tabSlideOut.v1.3.js的jquery.fancybox.js

Question

帮助!

在运行jquery.tabSlideOut.v1.3.js和fancybox时遇到问题。他们都在一起工作，但不在一起。

奇特的盒子在这里工作得很好，带有滑出的DIV注释掉了http://www.3d-flightcases.co.uk/sk-test/index2.php

但是当我为tabslideout添加DIV时，fancybox 'pop‘将不起作用

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

me 50.00给任何能帮我解决这个问题的人:-)

Answer 1

主要的问题是，除了非常旧的和不再维护的tabSlideOut插件之外，它不提供回调选项，因此您必须自己定制它们，以便在tabSlideOut初始化后初始化fancybox。

以下是为tabSlideOut插件创建自定义回调的一些说明：

1)。编辑您的tabSlideOut js文件。

在文件的开头查找以下行：

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

在最后一个回调选项(onLoadSlideOut)之后添加您的回调选项(在我的示例中是fancyCallback)，如下所示：

(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)。创建要由fancyCallback选项返回的函数(上面刚刚添加)。

滚动到tabSlideOut js文件的末尾，找到以下行：

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

在结束$.fn.tabSlideOut函数的花括号之前，添加fancybox回调函数，如下所示：

(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)。将fancyCallback选项添加到自定义tabSlideOut的初始化中，并将其设置为true，如下所示：

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

参见，其中包括自定义的tabSlideOut回调。

注释：我在这个演示中使用的是fancybix v2.x，但是使用正确的API选项，它应该可以与v1.3.x无缝地工作。