My goal is to open a media asset in colorbox according to the URL I specify in my address bar.
Topic has been discussed enough on the web but I can't seem to get it to work using a url with '?open=true' appended to the end to open a specific video upon loading the url.
HTML CODE
<ul> <li class="media-row">
<a rel="" class="colorbox-inline initColorboxInline-processed cboxElement" href="/?width=600px&height=400px&title=&inline=true#colorbox-inline-1"><img width="205" height="115" class="imagecache imagecache-lightbox_small" title="" alt="" src="http://localhost:8888/sites/default/files/imagecache/lightbox_small/emvideo-vimeo-33340864.jpg"></a><div style="display: none;"><div id="colorbox-inline-1"><div class="emvideo emvideo-video emvideo-vimeo"><div class="media-vimeo" id="media-vimeo-1">
<iframe width="600" height="375" src="http://player.vimeo.com/video/33340864?fullscreen=1&show_title=1&show_byline=1&show_portrait=1&autoplay=0"></iframe>
</div>
</div>
</div></div>
<h3>Sample Video</h3>
<p>Lorem ipsum dolor sit ame
</p>
</li>
<li class="media-row">
<a rel="" class="colorbox-inline initColorboxInline-processed cboxElement" href="/?width=600px&height=400px&title=&inline=true#colorbox-inline-2"><img width="205" height="115" class="imagecache imagecache-lightbox_small" title="" alt="" src="http://localhost:8888/sites/default/files/imagecache/lightbox_small/emvideo-vimeo-9445708.jpg"></a><div style="display: none;"><div id="colorbox-inline-2"><div class="emvideo emvideo-video emvideo-vimeo"><div class="media-vimeo" id="media-vimeo-2">
<iframe width="600" height="375" src="http://player.vimeo.com/video/9445708?fullscreen=1&show_title=1&show_byline=1&show_portrait=1&autoplay=0"></iframe>
</div>
</div>
</div></div>
<h3>Custom Video</h3>
<p>Lorem ipsum dolor sit amet, conse
</p>
</li>
<li class="media-row">
<a rel="" class="colorbox-inline initColorboxInline-processed cboxElement" href="/?width=600px&height=400px&title=&inline=true#colorbox-inline-3"><img width="205" height="115" class="imagecache imagecache-lightbox_small" title="" alt="" src="http://localhost:8888/sites/default/files/imagecache/lightbox_small/emvideo-vimeo-33989254"></a><div style="display: none;"><div id="colorbox-inline-3"><div class="emvideo emvideo-video emvideo-vimeo"><div class="media-vimeo" id="media-vimeo-3">
<iframe width="600" height="375" src="http://player.vimeo.com/video/33989254?title=0&fullscreen=1&show_title=1&show_byline=1&show_portrait=1&autoplay=0"></iframe>
</div>
</div>
</div></div>
<h3>Keor limpon</h3>
<p>Med borla dorla shoe
</p>
</li>
</li>
</ul>
JS
var
vars = [],
hash,
hashes = window.location.href.slice(window.location.href.indexOf('?')
+ 1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
$(".colorbox-inline").colorbox({open:vars['open'] == 'true' ? true : false});
Your approach is a good start, but the reason it is not working is because you also need to set up a way for colorbox to target each colorbox seperately. At the moment, colorbox is getting a jquery collection of all elements with the colorbox-inline class, and if open=true, it will always only open the first in the collection. And since you have not grouped them (by assigning the same non-empty rel
attribute to them), the remaining elements in the collection are being ignored.
In order for colorbox to target a specific colorbox on the page, give id's to all colorboxes in your html:
<a id="cb1" class="colorbox-inline" href="...">...</a>
Then in your javascript, instantiate all colorboxes, but only open a colorbox if one of those id's was sent in the url (like this: 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});
}