Colorbox fails to open or add cbox class

Question

I've got an <a href=""> which targets a hidden <div>. I'm loading the hidden HTML content into the popup modal window but my link always goes through to the homepage (baseurl).

http://coolicebox.petersenuploads.co.uk/product.php?xProd=2&xSec=5

See the link in the Options panel (see more colours)

It looks like the cbox class isn't being added to the link but I can't for the life of me see why it's not running? The code is there and being called but no class added hence the link goes to the root of the site.

Any ideas?

Many thanks

Answer 1

The element was in the HTML by the time document.ready() but there was a problem with the preceding call to 'anything-slider'. I've since commented it as follows to check if the slider exists before doing anything else. Now works. Thanks for your help and advice Andy, even if it wasn't the solution.

$(document).ready(function () {
if($('#slider').length > 0) {
    $('#slider')
        .anythingSlider({
            navigationFormatter : function(index, panel){
                return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
            },
            buildStartStop: false,
            buildNavigation: true,
            autoPlay: true
        })
        .anythingSliderFx({
            '.caption-top'    : [ 'caption-Top', '50px' ],
        })
}
//Add modal functionality where class is set
$('.modal-inline').colorbox({transition:'elastic', speed:500, width:'80%', height:'50%', inline:true});
$('.modal-image').colorbox({transition:'elastic', speed:500, width:'80%', height:'50%', inline:false});
$('.modal-image-square').colorbox({transition:'elastic', speed:500, width:'1000', height:'1000', inline:false});
});