Question

This is a ‘hack’ that enables the colorbox jQuery plugin to work with the jQuery live and the rel attribute (so you can group images int he lightbox):

 $('a[rel="group1"]').live('click', function(){ 
    $('a[rel="group1"]:not(.cboxElement)').colorbox(); 
    return false; 
  }).colorbox(); 

Now, the problem is that the lightbox only appears the second time you click on it.

So I thought I could automatically trigger the second click (after the events in the first one are finished).

Any suggestions to accomplish this?

EDIT:

I searched on Google about how to use the jQuery live and colorbox and found this.

Then I realized that it doesn’t work with groups of images.

Then I found this hack but it requires a second click.

Dynamically generated HTML:

$('#menu-item-27052').append("<a rel='group1' href='images/orion_beer.jpg'>test</a>")
$('#menu-item-27052').append("<a rel='group1' href='images/dish2.jpg'>test 2</a>")

Answer 1

Well you can call $(this).trigger('click', false), the false passes an argument to the event handler that you can check the existence of so you don’t run an infinite loop:

$('a[rel="group1"]').live('click', function(event, reTrigger){
    $('a[rel="group1"]:not(.cboxElement)').colorbox();
    if (typeof(reTrigger) == 'undefined' || reTrigger == false) {
        $(this).trigger('click', false);
    }
    return false; 
}).colorbox();

I’m not sure what you’re accomplishing with this but it seems like a strange work-around. Perhaps your code can call the colorbox plugin in a different way.

Maybe you should run .colorbox() on the elements as they are added to the DOM so when they are clicked it’s already setup and ready to go.

Update

$('#menu-item-27052').append("<a rel='group1' href='images/orion_beer.jpg'>test</a>");
$('#menu-item-27052').append("<a rel='group1' href='images/dish2.jpg'>test 2</a>");
$('.group1').colorbox();

Just call the .colorbox() function on the elements after they have been added to the DOM. If the Colorbox plugin has a “destroy” method to remove instances, then you should call that first:

$('#menu-item-27052').append("<a rel='group1' href='images/orion_beer.jpg'>test</a>");
$('#menu-item-27052').append("<a rel='group1' href='images/dish2.jpg'>test 2</a>");
$('.group1').colorbox.remove().colorbox();

On a side-note you should concoct a string and append all the DOM elements at once, if you use .append() a bunch it will slow down the execution of the code:

$('#menu-item-27052').append("<a rel='group1' href='images/orion_beer.jpg'>test</a><a rel='group1' href='images/dish2.jpg'>test 2</a>");
$('.group1').colorbox.remove().colorbox();