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

Posted 2023-02-23

【中文标题】jquery.fancybox.js 和 jquery.tabSlideOut.v1.3.js

【英文标题】：jquery.fancybox.js with jquery.tabSlideOut.v1.3.js

【发布时间】：2013-11-27 18:43:27

【问题描述】：

帮助！

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

花式框在这里很好用，滑出 DIV 被注释掉了 http://www.3d-flightcases.co.uk/sk-test/index2.php

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

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

50.00 英镑给任何可以为我解决这个问题的人 :-)

【参考方案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
    );
);

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

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

【讨论】：

你欠我 50.00 英镑 ;)

Brilliant JFK - 刚刚检查了 JSFIDDLE，它似乎是正确的。今天晚些时候我会在我的网站上试用它。