使用javascript从URL调用colorbox
Call colorbox from URL using javascript
我的目标是根据我在地址栏中指定的URL在colorbox中打开媒体资源
主题已经讨论足够在网上,但我似乎不能得到它的工作使用一个url与'?Open =true',用于在加载url时打开特定的视频。
HTML代码
<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});
您的方法是一个良好的开端,但它不起作用的原因是,您还需要为colorbox分别设置针对每个colorbox的方法。目前,colorbox正在使用colorbox-inline类获取所有元素的jquery集合,如果open=true,它将始终只打开集合中的第一个元素。由于您没有对它们进行分组(通过为它们分配相同的非空rel
属性),因此集合中的其余元素将被忽略。
为了让colorbox在页面上针对特定的颜色框,在你的html中给所有的颜色框id:
<a id="cb1" class="colorbox-inline" href="...">...</a>
然后在你的javascript中,实例化所有的colorbox,但只打开一个colorbox,如果其中一个id是在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});
}
相关文章:
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何从Java/scala调用js美化程序
- 如何调用这个匿名 JavaScript 函数
- 如何从模块链中调用函数.导出到节点中
- 我需要从php调用javascript或jquery
- Chrome开发工具(如何知道我在调用哪个javascript对象)
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- node.js:setInterval()正在跳过调用
- 如何在单击复选框后调用控制器方法
- 如何在JQuery函数中定义一个值,然后调用另一个函数并使用该值
- 使用Google Visualization动态调用构造函数
- 如何在webView,Android中从@JavascriptInterface方法调用Javascript
- 如何调用一个jQuery Colorbox弹出在选择HTML控件的onchange事件
- 为什么通过 $.ajax() 方法调用时不显示 jQuery colorbox 弹出窗口
- 使用javascript从URL调用colorbox
- 如何使用javascript onclick事件调用Colorbox效果(示例7)
- 无法使用jQuery正确调用colorbox