我使用 colorbox 在一页上显示图像和 html 内容。此元素的初始化是不同的,一个用于图像,另一个用于 html 内容。 窗口的设计不同,“image”颜色框的 cboxLoadedContent div 中的填充是“padding:15px”,“html”颜色框的 cboxLoadedContent div 中的填充是“padding:0px 15x”。 单击“html”链接时我可以添加特殊类,填充将是正确的。但是主要的 colorbox 窗口不会改变他的高度。 除了这两个链接之外,还有不同画廊的一部分。所以我不能为具有强宽度和高度的 html 调用 colorbox。
有人可以帮忙吗?
最佳答案
我喜欢评论中提供的解决方案,但进行了一些小改动以使代码更通用。这个想法是所有 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 主题需要在其他主题之前链接,以便所有主题一起工作。
关于javascript - 是否可以在同一页面上使用两种不同的颜色框样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12818531/