I have a set of DIVs, which I am displaying via Colorbox.
It works fine as below
$(".my_group").colorbox({rel:'my_group', inline:true, href:$(this).attr('href')});
Now I want to kick off colorbox as soon as the page is open, so I tried
$.fn.colorbox({rel:'my_group', inline:true, href:$('.my_group').attr('href')});
Which doesn't work. I also tried
$.fn.colorbox({rel:'my_group', inline:true, href:'#box1'});
Where #box1 is the first div of the group. However, it actually ADDS box1 as another inline slide in the group.
So what's the best way to start the group transition colorbox automatically?
To open colorbox automatically (on page load), just add open:true to your settings. Also, the grouping with the 'rel' doesn't necessarily need to be in the options. If you leave it out, it will allow you to put all your colorbox groups in one call. Also, if your target elements already have an href attribute, you don't need to put that in the options (colorbox looks for this attribute automatically, even on divs and whatnot). So, your colorbox call could look like this:
$(".cbox").colorbox({inline:true, open:true});
And then this html:
<a class="cbox" href="#C" rel="my_2group">C</a>
<a class="cbox" href="#D" rel="my_2group">D</a>
<a class="cbox" href="#A" rel="my_group">A</a>
<a class="cbox" href="#B" rel="my_group">B</a>
Will give you 2 seperate colorboxes each with 2 images, and the first group will open when the page is loaded.
Note that combining them all in one colorbox call only works when you can ensure that the group you want to open is the highest up in the dom (which is usually not a problem, as inline content is usually hidden). If that's not the case, then you will have to split it into a couple calls.