javascript - 是否可以在同一页面上使用两种不同的颜色框样式？

Question

我使用 colorbox 在一页上显示图像和 html 内容。此元素的初始化是不同的，一个用于图像，另一个用于 html 内容。窗口的设计不同，“image”颜色框的 cboxLoadedContent div 中的填充是“padding:15px”，“html”颜色框的 cboxLoadedContent div 中的填充是“padding:0px 15x”。单击“html”链接时我可以添加特殊类，填充将是正确的。但是主要的 colorbox 窗口不会改变他的高度。除了这两个链接之外，还有不同画廊的一部分。所以我不能为具有强宽度和高度的 html 调用 colorbox。

有人可以帮忙吗？

Answer 1

我喜欢评论中提供的解决方案，但进行了一些小改动以使代码更通用。这个想法是所有 colorbox css 文件都包含在“head”中但被禁用。然后当打开一个 colorbox 窗口时，只有具有相应主题的 css 文件被启用。

有很多方法可以实现，其中之一:

function useColorboxTheme() {
    var selectedTheme = $(this).attr("data-theme");

    $(".colorboxTheme").attr("disabled", "disabled");
    $("#" + selectedTheme).removeAttr("disabled");
}

function defaultColorboxTheme() {
    $(".colorboxTheme").attr("disabled", "disabled");
    $(".colorboxTheme.default").removeAttr("disabled");
}

$(document).ready(function(){
    $("a.colorbox").colorbox({
        onOpen: useColorboxTheme,
        onClosed: defaultColorboxTheme
    });
});

useColorboxTheme() 在您的颜色框 anchor 中查找 data-theme 属性，例如:

<a data-theme="theme1" class="colorbox" title="This is pic1" href="http://pics/pic1.jpg"></a>

请注意，“theme1”对应于标题部分“链接”标签的 ID。例如:

<link id="theme1" class="colorboxTheme" rel="stylesheet" type="text/css" href="css/colorbox/example1/colorbox.css">

您可能希望根据您正在使用的代码或 CMS 对其进行调整，但这给出了总体思路。这是一个 fiddle为此。

但是请注意，这不是 colorbox 的预期用途。您必须在所有浏览器中对其进行彻底测试，以确保您不会在使用多个主题时遇到问题。我注意到的一个怪癖是示例 5 主题需要在其他主题之前链接，以便所有主题一起工作。