Question

我正在使用fancyBox 2.1.5，我有3个选择器以不同的方式适应视频和图像。它们只是略有不同，所以有很多重复的代码。

这就是看起来的样子：

// Fit video content to display area, ignoring title text.
$('.fitVideo').fancybox({
    helpers: {

        // Enable the media helper to better handle video.
        media: true,

        // Put comments within the white border.
        title: {
            type: 'inside'
        }
    },

    // Do not use this because it tries to fit title text as well.
    fitToView: false,

    // Prevent the introduction of black bars when resized for mobile.
    aspectRatio: true,

    // Restrict content to the display dimensions.
    maxWidth: "100%",
    maxHeight: "100%",

    // Change the title keyword to 'caption' to avoid title text in tooltips.
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
    },

    // Override the default iframe dimensions with manually set dimensions.
    afterLoad: function() {
        this.width = $(this.element).data("width");
        this.height = $(this.element).data("height");
    }
});

// Fit image content to display area, ignoring title text.
$('.fitImage').fancybox({
    helpers: {

        // Put comments within the white border.
        title: {
            type: 'inside'
        }
    },

    // Do not use this because it tries to fit title text as well.
    fitToView: false,

    // Restrict content to the display dimensions.
    maxWidth: "100%",
    maxHeight: "100%",

    // Change the title keyword to 'caption' to avoid title text in tooltips.
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
    }
});

// Only fit image content to display width; content extends beyond the bottom of the page.
$('.fitImageWidth').fancybox({
    helpers: {

        // Put comments within the white border.
        title: {
            type: 'inside'
        }
    },

    // Do not use this because it tries to fit title text as well.
    fitToView: false,

    // Only restrict content to the display width.
    maxWidth: "100%",

    // Change the title keyword to 'caption' to avoid title text in tooltips.
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
    }
});

它们对title，type，fitToView，maxWidth和beforeLoad共享相同的值，所以我希望我可以放置那些$('.fancybox') catch-all中的属性，然后有小的选择器，只有在这些默认值之上“堆叠”的唯一属性。

这可能是完全错误的方法，但是......那么最好的方法是什么呢？

Answer 1

你可以这样做：

//Save your default settings
var fancySettings = {
    helpers: {
       // Put comments within the white border.
        title: {
            type: 'inside'
        }
    },

    // Do not use this because it tries to fit title text as well.
    fitToView: false,

    // Only restrict content to the display width.
    maxWidth: "100%",

    // Change the title keyword to 'caption' to avoid title text in tooltips.
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
    }
}

//Apply defaults
$('.fitImage, .fitImageWidth').fancybox(fancySettings );
//For any modification just extend it from the new object which will override the properties if they are existing.
$('.fitVideo').fancybox($.extend({}, fancySettings ,{helpers:{media: true}});

Answer 2

如我的初始帖子中所示，选择不同的类实际上将这些项拆分为不同的fancyBox组，即使它们都共享相同的data-fancybox-group值。

这意味着您无法使用上述方法在单个组中混合视频和图像，甚至无法使用不同的屏幕调整参数混合图像。幸运的是，这促使我走向更优雅的解决方案。

$(document).ready(function() {
    $(".fancybox").fancybox({

        beforeLoad: function() {

            var elem = $(this.element);

            if (elem.hasClass("video")) {
                this.width  = elem.data("width");
                this.height = elem.data("height");
            }

            if (elem.hasClass("tall")) {
                this.maxHeight = 9999;
            }
        }

    });
});

我已切换回选择所有fancybox元素（以便所有内容都可以正确分组），然后使用fancyBox beforeLoad回调来测试所选元素上是否存在某个类并更改属性适当。到目前为止，这是一种享受！

如何在fancyBox初始化中防止代码重复？

2 个答案: