Jquery colorbox: initialize gallery on click

Question

I'm using the manual colorbox call like so:

$('a[rel="example1"]').click(function(event){

                    event.preventDefault();

                    $.colorbox({
                        href: $(this).attr('href'),
                        maxWidth: '90%',
                        initialWidth: '200px',
                        initialHeight: '200px',
                        speed: 700,
                        overlayClose: false
                    });
                });

I have to use it this way in order to not interfere with another plugin (it's the only way I could get it to work).

The problem is that while the modal pops up, it doesn't have the other images or anchors in the group, so there's no "next" or "previous" options.

Any ideas on how to fix this?

Answer 1

You can manually set the rel of the elements you want to group together when you call colorbox:

$('a[rel="example1"]').click(function(event){

    event.preventDefault();

    $.colorbox({
        href: $(this).attr('href'),
        maxWidth: '90%',
        initialWidth: '200px',
        initialHeight: '200px',
        speed: 700,            
        overlayClose: false,
        rel: $(this).attr('rel')
    });
});

Edit

I did some more digging in the colorbox source and the reason it doesn't work is because the other links that share the same rel haven't had an associated colorbox object created for them. The following works, but it's not a pretty hack...and it may not get around your other plugin issues:

$('a[rel="example1"]').click(function(event){

    event.preventDefault();

    // Build up the list of related colorbox objects
    $('a[rel="example1"]').colorbox({
        maxWidth: '90%',
        initialWidth: '200px',
        initialHeight: '200px',
        speed: 700,            
        overlayClose: false
    });

    // Open the specific link's colorbox
    $.colorbox({
        href: $(this).attr('href')
    });
});