Jquery colorbox: initialize gallery on click

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 "n开发者_如何学Cext" or "previous" options.

Any ideas on how to fix this?

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')
    });
});

My solution for creating jQuery colorbox on click:

$(function(){
    $('#some-images-container a[rel="gallery"]').live('click', function(){
        var $this = $(this);
        var rel = $this.attr('rel');

        // Build colorbox sequence
        $this.closest('div') // parent container
            .find('a[rel="'+rel+'"]').colorbox({ // find all matching items & init colorbox on them
                    open: false, // don't open, just init
                    rel: rel // use the rel
                }
        });

        // Open the specific link's colorbox
        $this.colorbox({open: true});
        return false; // prevent
    });
});

The only problem is that you didn't set the rel property for the color box.