javascript - 在页面上启动灯箱加载Cerabox + Mootools

我有一个Cerabox lightbox设置，工作正常。但我希望看到它在页面加载时执行，而无需访问者单击链接。任何人都有可以帮助的功夫Mootools技能吗？

这是代码:

window.addEvent('domready', function(){
//modal
$$('a.video').cerabox({
width: 560,
height: 345,
displayOverlay: false
});

<a href="http://www.youtube.com/embed/h8WiyX21A1c?rel=0&amp;autoplay=1" class="video youtube"><img src="http://thumbnail.jpg" alt="video thumbnail"><div class="btn-play"><p>&gt;</p></div></a>

提前致谢!

最佳答案

不是像api那样最好的书面插件，也不是很好，因为它可以扩展使用时扩展了Element / Elements原型(prototype)。构造函数将近100行...这不是要编写类的方式。无论如何，这是作者决定和维护的……

https://github.com/ceramedia/CeraBox/blob/master/cerabox.js#L134-L143

这部分显示了非常NON-DRY的元素绑定(bind)，没有像this.open这样的简单抽象。

但是，您确实可以选择触发事件处理程序，如下所示:

document.getElement('a.video').fireEvent('click'); // after cerabox init.

一件事:您执行$$('a.video').cerabox()-这是一个集合。您一次只能打开1个模态，所以...如果您想将其作为单个元素绑定(bind)，则在我的示例中只是node.getElement(selector)。

或者，您可以执行以下操作:

var cb = el.retrieve('cerabox'); // some el from $$('a.video')
// gets actual class instance exposed through element storage

if (cb._itemClick(event)) {
    cb.currentItem = cb.collection.indexOf(cb);
    cb.showInline(); // or whatever method is appropriate
}

问题是他依赖于私有(private)函数中elements集合中的索引-因此.indexOf通过外部穿孔来获取它...玩得开心