是否可以在同一页面上使用两种不同的颜色框样式？ [英] Is it possible to use two different colorbox style on same page?

问题描述

我使用colorbox在一个页面上显示图像和html内容。这个元素的初始化是不同的，一个用于图像，另一个用于html内容。
窗口的设计是不同的，cboxLoadedContent div中的填充imagecolorbox是padding：15px，填充在cboxLoadedContent div中的htmlcolorbox是padding：0px 15x。
点击html链接我可以添加特殊类，填充也是正确的。但主色盒窗口不会改变他的身高。
旁边的两个链接都是不同画廊的一部分。因此我无法为宽度和高度较高的html调用colorbox。

I use colorbox to show images and html content on one page. Initializing of this elemets is different, one for the image and another for html content. Design of window is different, padding in cboxLoadedContent div for "image" colorbox is "padding:15px" and padding in cboxLoadedContent div for "html" colorbox is "padding:0px 15x". I can add special class when click on "html" link and padding will be correct. But main colorbox window does not change his height. Beside both links are part of different galleries. So I can't call colorbox for the html with strong width and height.

有人可以帮忙吗？

推荐答案

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

I like the solution provided in the comments, but with some minor changes to make the code more generic. The idea is that all colorbox css files are included in the ´head´ but are disabled. Then when a colorbox window is opened, only the css file with the corresponding theme is enabled.

有很多方法可以实现这一点，其中之一是：

There's a lot of ways to achieve that, one of them:

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（）查找数据主题 colorbox锚点中的属性，例如：

The useColorboxTheme() looks for a data-theme attribute in your colorbox anchors, e.g.:

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

请注意，theme1对应于head部分中'link'标记的id。例如：

Note that "theme1" corresponds to the id of the ´link´ tag in the head section. E.g.:

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

您可能希望将其调整为您正在使用的代码或CMS，但这会给出一般的想法。这是一个小提琴。

You'll probably want to adjust that to what code or CMS you are working with, but this gives the general idea. Here's a fiddle for that.

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

Be aware, however, that this is not the intended usage of colorbox. You'll have to thoroughly test it in all browsers to be sure you won't run into problems with using multiple themes. One quirk I did notice is that the example 5 theme needs to be linked before the other themes for all themes to work together.

这篇关于是否可以在同一页面上使用两种不同的颜色框样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！