1

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

有人可以帮忙吗？

4

1 回答 1

2

我喜欢评论中提供的解决方案，但进行了一些小的更改以使代码更通用。这个想法是所有颜色框 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()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，但这给出了总体思路。这是一个小提琴。

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

于 2012-10-10T21:56:46.307 回答