是否可以在同一页上使用两种不同的colorbox风格？

我使用colorbox在一个页面上显示图像和html内容。这个元素的初始化是不同的，一个用于图像，另一个用于html内容。窗口的设计是不同的，在“图像”colorBox的cboxLoadedContent div中的填充是“padding：15px”，并且在“html”colorbox的cboxLoadedContent div中的填充是“padding：0px 15x”。当点击“html”链接时，我可以添加特殊类，填充将是正确的。但主色箱窗口不会改变他的身高。除了这两个链接是不同画廊的一部分。所以我不能为宽度和高度很强的html调用colorbox。是否可以在同一页上使用两种不同的colorbox风格？

有人可以帮忙吗？

来源

2012-10-10 Maxym Marchenko

我从来没有尝试过，但它可以通过使用不同的主题来实现。 – Tariqulazam

这是一个老问题[多个颜色框在同一页]（https://github.com/jackmoore/colorbox/issues/4）它已经被解决了 –

Aravind，不幸的是你的例子不起作用。 Colorbox窗口随着您的变体消失。 –

我喜欢评论中提供的解决方案，但只做了一些小修改以使代码更通用。这个想法是所有的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>

注意“ theme1“对应于头部中'link'标签的ID。例如：

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

您可能需要将其调整为您正在使用的代码或CMS，但这给出了总体思路。这是一个fiddle。

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

来源

2012-10-10 21:56:46 Donamite

你的文章对我来说非常有用。但不幸的是，这个变体不适用于我的项目。如果我在colobox的页面上加载两个css文件，会有一些混合风格，特别是内容持有者的填充。所以我希望只留下一个用于主包装的CSS，并加载它自己的样式。 –

是否可以在同一页上使用两种不同的colorbox风格？

回答

相关问题