使用javascript从URL调用colorbox
我的目标是根据我在地址栏中指定的URL在colorbox中打开媒体资产 这个主题在web上已经讨论得够多了,但我似乎无法使用一个附加了“?open=true”的url在加载url时打开特定的视频 HTML代码使用javascript从URL调用colorbox,javascript,jquery,url,colorbox,Javascript,Jquery,Url,Colorbox,我的目标是根据我在地址栏中指定的URL在colorbox中打开媒体资产 这个主题在web上已经讨论得够多了,但我似乎无法使用一个附加了“?open=true”的url在加载url时打开特定的视频 HTML代码 <ul> <li class="media-row"> <a rel="" class="colorbox-inline initColorboxInline-processed cboxElement" href="/
<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>
-
视频样本
同侧阴唇
-
自定义视频
康塞斯,洛雷姆·伊普苏姆·多洛·西特
-
基尔林彭
Med borla dorla鞋
JS
var
vars=[],
搞砸
hashes=window.location.href.slice(window.location.href.indexOf(“?”)
+1.分割("与");;
for(var i=0;i
您的方法是一个良好的开端,但它不起作用的原因是,您还需要为colorbox设置一种方法,分别针对每个colorbox。目前,colorbox正在使用colorbox内联类获取所有元素的jquery集合,如果open=true,它将始终只打开集合中的第一个元素。由于您没有对它们进行分组(通过为它们指定相同的非空rel
属性),因此将忽略集合中的其余元素
为了使colorbox针对页面上的特定colorbox,请为html中的所有colorbox指定id:
<a id="cb1" class="colorbox-inline" href="...">...</a>
问题是我找不到打开颜色盒的方法。我对这门学科的知识有限。根据我的理解:我将colorbox分配给一个var,检索锚散列,然后根据散列值打开colorbox。也许是这样。但我根本无法打开它。我想你在找聊天室。我不确定我是否理解你的评论……聊天室:谢谢Donamitelsnt,你介意完整地解释你的答案吗?当然可以,arkjoseph。在更好地重读代码之后,我的原始答案无论如何都需要更多。我希望这更清楚。你的意思是我需要为每个锚添加一个唯一的类…例如:#cb1、#cb2、#cb3No,所有colorbox锚都有相同的类“colorbox inline”,并且每个你想用url参数打开的锚都必须有一个唯一的
id
attributesorry,我的意思是说唯一的id。好的,非常感谢。我现在正在测试。我今天晚些时候再发回来!
<a id="cb1" class="colorbox-inline" href="...">...</a>
//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});
}