CODEWITHSUNDEEP
jquerycolorbox
FloatLeft
FloatLeft

Reputation: 1337

Specifying the href property of colorbox when colorbox is triggered

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.

Upvotes: 2

Views: 7513

Answers (2)

Peter Pajchl
Peter Pajchl

Reputation: 2709

As mentioned in the Colorbox Docs

you can set callback "onOpen" (and "onLoad" as well probably), which should fire before colorbox starts loading content specified in the target giving you chance to modify it

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

UPDATE Probably simpler solution - colorbox allows use of function instead of static value

$(function () {
    $(".button").colorbox({ 
        width: "50%", 
        height: "50%", 
        iframe: true, 
        href: function(){
            // Since I can't see your markup I can't provide exact solution
            // but if your .button elm is an anchor then use
            var url = $(this).attr('href');
            // if you are obtaining the url from diff. elm, grab it from there
            // such as $('#your_element).attr('href') 
            return url;
        }, 
        opacity: 0.6
    });
});

Upvotes: 5

CSSian
CSSian

Reputation: 1661

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>

Upvotes: 4

Related Questions