Question

Is it possible to specify the target URL for colorbox at the time of clicking the actual button that triggers colorbox.

At the moment I have this in my document bind function:

$(function () {
    $(".button").colorbox({ width: "50%", height: "50%%", iframe: true, href: "/abc", opacity: 0.6 });
});

However, the href property depends on the value of a dropdown list that I do not know when I first bind colorbox to the button.

Answer 1

Your could it this way… This approach bypasses the plugin’s automatic onClick handling. You call the plugin on your own event AFTER you figure out what href value you want to use.

In the code snippet below, the var myHref is static, but you could write a bit of js to set it from your data source.

BTW, I think you have a typo on the height property – duplicate % signs??

<script>
        $(document).ready(function(){
            $('.button').click( function() {
                var myHref = "/someHREF";
                $.colorbox({
                    width: "50%", 
                    height: "50%", 
                    iframe: true, 
                    href: myHref, 
                    opacity: 0.6
                });             
            });
        });             
</script>