JQuery colorbox: initialize gallery by click

Question

I use a manual color call like this:

$('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 in such a way as not to interfere with another plugin (this is the only way to make it work).

The problem is that while the modal pop-ups, it has no other images or anchors in the group, so there are no "next" or "previous" options.

Any ideas on how to fix this?

Answer 1

You can manually set the relelements you want to group 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

colorbox, , , , , rel, colorbox. , ... :

$('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 colorbox
    $.colorbox({
        href: $(this).attr('href')
    });
});

Answer 2

jQuery colorbox :

$(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 colorbox
        $this.colorbox({open: true});
        return false; // prevent
    });
});

Answer 3

The only problem is that you did not set the rel property for the color field.