Question

I have a colorbox that lets the user select an image. How do I get the file name back from the colorbox? (I have noticed the onClosed function.)

---

Solution:

As @Gummy sugested i used the onComplete function as the following code exemplifies:

‘Return’ page:

<input id="colorbox_hidden_return" type="hidden"/>

...

$("#whatever-you-want-to-click-on-to-get-the-color-box").click(function() {
        $.colorbox(
        {
            href: '<?= site_url('the-source-url') . '/' ?>' + id, 
            height: "600px;", 
            onClosed: function() { // called when the colorbox closes
                var image = $('#colorbox_return_hidden').val();

                // ... other processing - what ever the value was is in image
            }   
        });
    });

In the colorbox source

var image_name_var = "dynamicaly_change_this_name.png";

$('#submit-or-use-button-id').click(function() {
    $('#colorbox_return_hidden').val(image_name_var);
});

Answer 1

Any time while colorbox is open, you can call the element method to retrieve a jQuery object of the current element. From there you can select the element, and access the href property:

href = $.colorbox.element()[0].href;

Also, in any callback the execution context (the value of ‘this’) will be the current element. So if you wanted to use the onComplete callback for example, you could do something like this:

$('#example').colorbox({onComplete:function(){
    href = this.href;
}});