Question

HELP！

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

Fancy box在这里很好用，幻灯片DIV已经注释掉了 http://www.3d-flightcases.co.uk/sk-test/index2.php

但是当我为tablideout添加DIV时，fancybox'弹出'将无法正常工作

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

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

在最后一个选项（fancyCallback）之后

和添加您的回调选项（我的示例中为onLoadSlideOut），如：

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

请参阅 JSFIDDLE ，其中包含自定义的tabSlideOut的回调。

注意：我在本演示中使用fancybix v2.x，但它应该使用正确的API选项与v1.3.x无缝协作。

jquery.fancybox.js和jquery.tabSlideOut.v1.3.js

1 个答案: