在同一页上可以使用两种不同的颜色框样式吗

Question

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

有人能帮忙吗？

Answer 1

我喜欢注释中提供的解决方案，但做了一些小的更改，使代码更通用。其想法是，所有的colorbox css文件都包含在"head"中，但被禁用。然后，当打开一个颜色框窗口时，只启用具有相应主题的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>

请注意，"主题1"对应于标题部分中"链接"标签的id。例如：

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

你可能会想根据你正在使用的代码或CMS来调整它，但这给出了大致的想法。这是一把小提琴。

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