Is it possible to use two different colorbox style on same page?

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.

Can somebody help with this?

Answers:

Answer

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
    });
});

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>

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">

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 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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.