Can I call jQuery Colorbox on an element before it is added to the DOM?

Question

Can I call jQuery Colorbox on an element before it is added to the DOM?

685 views Asked by Ifedi Okonkwo At 24 November 2024 at 19:05

I use jQuery Colorbox which works well like so:

$(function(){
    $("a.slideshow").colorbox();
});

Now, if after page load, I add a new node (matching a.slideshow), (created or ajax'ed), then of course it does not work untile I call .colorbox() again.

I have looked around and seen the difficulty with doing this kind of thing generally. (e.g. Is there a JavaScript/jQuery DOM change listener?, http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified)

So, just in case there's a special solution for Colorbox, I am formally asking the question.

Original Q&A

There are 3 answers

**scgough** · Answer 1 · 2015-06-11 08:04:43

scgough On 11 June 2015 at 08:04

Can't you re-initialise the colorbox at the point of dynamically adding a new element?

So,

$.colorbox.remove();
$("a.slideshow").colorbox();

**Jeff Watkins** · Answer 2 · 2015-06-11 08:40:30

The following code works for me in Chrome using the DOMSubtreeModified event. You can click on the images as they're added.

<html>
    <head>
        <link rel="stylesheet" href="./colorbox.css">
    </head>
    <body>
        <div id="myContainer">
        </div>

        <script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="./jquery.colorbox-min.js"></script>

        <script type="text/javascript">
            $(function() {  
                  var x = 1;
                  function doColorbox() {
                    $('.gallery').colorbox({ opacity:0.5 , rel:'group1' });
                  }

                  $('#myContainer').bind("DOMSubtreeModified", doColorbox);

                  var timer = setInterval(function() {
                    $("#myContainer").append("<a class='gallery' href='./" + x + ".png'>Image " + x + "</a>");
                    x++;

                    if (x > 5) {
                        clearInterval(timer);
                    }

                  },3000);
            });
        </script>
    </body>
</html>

**jherax** · Answer 3 · 2015-06-11 09:16:41

The approach could be delegating events, thus no matter if an element not exists at the moment, the event will be attached when the element is created.

Here I will simulate an ajax response and it creates some elements:

//delegates the "click" event to document and namespace the event with ".nsPopup"
$(document).off(".nsPopup").on("click.nsPopup", ".open-box", function(e) {
    e.preventDefault();
    var item = $(this).data("item");
    //the element with ".open-box" class opens the colorbox
    //and display the content of a hidden element
    $.colorbox({
        html: $(".toShow-" + item).html(), //hidden element
        width: 100,
        height: 80,
        fixed: true,
        open: true,
        overlayClose: false
    });
});

//suppose we generate elements via ajax
function ajaxSuccess (data) {
    data = [1,2,3,4,5];
    var i = 0, max = data.length;
    while(i < max) {
        $("<div/>")
            .append($("<a href='#' class='open-box'/>").text("link " + data[i]).data("item", i+1))
            .append($("<div style='display:none'/>")
                .append($("<span/>").addClass("toShow-" + (i+1)).text("Hidden " + data[i])))
            .appendTo("body");
        i += 1;
    }
}

//simulates the success response
ajaxSuccess();

TechQA.

Can I call jQuery Colorbox on an element before it is added to the DOM?

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in DOM

Related Questions in COLORBOX

Popular Questions

Popular Tags

Trending Questions