LightWindow：支持多种媒体显示的Lightbox灯箱特效

三、自定义实例

如果你只想实例化一个窗口，我们就可以使用函数createWindow(id)。你可以使用作者创建的myLightWindow对象，当然你也可以使用你自己创建的对象。代码如下：

<a href=http://www.5icool.org/uploadfile/2011/0703/20110703112149595.jpg" id="sample-link">链接名称</a>
<script type="text/javascript">    
    myLightWindow.createWindow('sample-link');
</script>

创建生成一个窗口，使用javascript，在使用作者创建的myLightWindow对象下，你可以使用activateWindow函数：

myLightWindow.activateWindow({
    href:'http://stickmanlabs.com/images/kevin_vegas.jpg',
    title:'Waiting for the show to start in Las Vegas',
    author:'Jazzmatt',
    caption:'Mmmmm Margaritas! And yes , this is me...',
    left: 300
});

你也可以设置更多的选项，如下：

• href              //窗口链接的位置
• title             //窗口的标题
• author            //窗口的作者
• caption           //窗口的说明文字
• rel               //设置rel标签
• top               //窗口的顶部位置
• left              //窗口的左边位置
• type              //窗口要展现的媒体类型
• showImages        //图片的数量
• height            //窗口的高度
• width             //窗口的宽度
• loadingAnimation //缓冲动画设置
• iframeEmbed       //嵌入媒体到一个框架内而不是一个div内
• form              //表单的名称

Local Page
这个页面会自适应内容的大小，除非你设置的窗口的大小不足够大或者你在属性里设置了不同的大小。

<a href="blank.html" class="lightwindow">链接名称</a>

Inline Content
正在加载的library将会寻找一个容器，隐藏它只是引用它的内容到新窗口。

<a href="#id-of-container" class="lightwindow" >链接名称</a>

Forms
表单有一些麻烦，我们需要先创建一个本地页面

<a href="blank.html" class="lightwindow" > 链接名称</a>

现在在那个表单页，提交按钮需要定义一个动作。

Submit form Button Sample
下面为你展示了如何表单创建一个提交按钮

<a href="hello.php" params="lightwindow_form=sample-form" class="lightwindow_action" rel="submitForm"><button>Submit</button></a>

Close Button Sample
下面为你展示了如何创建一个取消按钮。

<a href="#" class="lightwindow_action" rel="deactivate">Cancel</a>

Iframe Calls
你所作的就是在函数调用之前加入以下代码：

<a href="http://www.5icool.org/" class="lightwindow_iframe_link" ><strong>Open a LightWindow from an iframe!</strong></a>
<script type="text/javascript">
     var links = $$('.lightwindow_iframe_link');
     links.each(function(link) { Event.observe(link, 'click', function() {parent.myLightWindow.activate(null, link);}, false);
        link.onclick = function() {return false;};     });        
</script>