Ваш подход - хорошее начало, но причина, по которой он не работает, заключается в том, что вам также нужно настроить способ для colorbox, чтобы он нацеливался на каждый colorbox отдельно.На данный момент colorbox получает коллекцию jquery всех элементов с классом colorbox-inline, и если open = true, он всегда будет открывать только первый в коллекции.И поскольку вы не сгруппировали их (назначив им тот же непустой атрибут rel), оставшиеся элементы в коллекции игнорируются.
Для того, чтобы colorbox нацеливался на конкретный colorbox наНа странице укажите идентификаторы для всех цветовых ящиков в вашем html:
<a id="cb1" class="colorbox-inline" href="...">...</a>
Затем в своем javascript создайте экземпляры всех цветовых ящиков, но открывайте цветное поле только в том случае, если один из этих идентификаторов был отправлен в URL (например: http://site.com/page.html?open=cb1):
//get the colorbox id in url (or set to false if not found)
var colorboxId =
(window.location.href.indexOf('open=')==-1) ?
false :
window.location.href.slice(window.location.href.indexOf('open=') + 'open='.length + 1).split('&')[0];
//OR: if you prefer using regular expressions, you can tidy
//that up with something like this:
var colorboxId = url.match(/open=([\w\d]*)/) && RegExp.$1 || false;
//instantiate all colorboxes on the page (but do not open any)
$(".colorbox-inline").colorbox();
//if the id of the colorbox was sent in the url, open it now
if(colorboxId!==false) {
$('#' + colorboxId).colorbox({open:true});
}