Search code examples
javascriptjquerycsslightboxcolorbox

Two different Colorbox popups on same page separate settings?

I found a solution for multiple colorboxes within the same page at this stack post

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,
        iframe:true,
        innerWidth:940,
        innerHeight:375,
        loop: true,
        slideshow: false,
        slideshowAuto: true,
        slideshowSpeed: 2500,
        slideshowStart: "start slideshow",
        slideshowStop: "stop slideshow",
    });
});

This little snippet works great but it only lets you style the colorboxes differently through different css files. but all colorboxes are still stuck with the same behavioral options in the js. I would like to use different css AND different js settings for each instance. Possible?

Solution

  • I figured a way to do it, perhaps someone can come up with an easier way, but this works just fine.

    In the html doc:

    <head>        
    <link id="colorboxHtml" rel="stylesheet" type="text/css" href="styles/colorboxHtml.css">
    <link id="colorboxYoutube" rel="stylesheet" type="text/css" href="styles/colorboxYoutube.css">
</head>
<body>
        <section>
            <a class="html" href="includes/colorboxHtml.html">Web page in colorbox
            </a>                    
        </section>
        <section>
            <a class="youtube" href="http://www.youtube.com/embed/8C0NfQrky6I">Youtube in colorbox
            </a>
        </section>
    <!--footer-->
    <script src='scripts/colorboxHtml.js'></script>
    <script src='scripts/colorboxYoutube.js'></script>
    <script>
        $(document).ready(function(){
            jQuery(".html").colorboxHtml({iframe:true, innerWidth:"80%", innerHeight:500});
            jQuery(".youtube").colorboxYoutube({iframe:true, innerWidth:640, innerHeight:390});
        });
    </script>
</body>

    Now we need to create the custom js and css files:

    1. Take the colorbox.css file and find/replace every instance of "colorbox" and replace it with, for the first in this example, "colorboxHtml"
    2. In the same file find/replace every instance of "cbox" and replace it with "cboxh"
    3. Save the file as colorboxHtml.css
    4. Take the colorbox.js file and do the same find/replaces for colorbox and cbox as you did in the css file
    5. Save the file as colorboxHtml.js
    6. Rinse and Repeat for every other instance of colorbox you want

    Now we can not only style each instance differently but we can completely control each instance's javascript functionality!!