1

帮助！

运行 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 英镑 :-)

4

1 回答 1

0

主要问题是 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 的初始化中并将其设置为truelike ：

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 无缝协作。

于 2013-11-28T01:26:41.557 回答