<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css"/>
<script type="text/javascript" src="http://www.ostools.net/js/jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
<script>
    $(document).ready(function(){
        //Examples of how to assign the ColorBox event to elements
        $(".group1").colorbox({rel:'group1'});
        $(".group2").colorbox({rel:'group2', transition:"fade"});
        $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
        $(".group4").colorbox({rel:'group4', slideshow:true});
        $(".ajax").colorbox();
        $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
        $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
        $(".inline").colorbox({inline:true, width:"50%"});
        $(".callbacks").colorbox({
            onOpen:function(){ alert('onOpen: colorbox is about to open'); },
            onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
            onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
            onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
            onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
        });
         
        //Example of preserving a JavaScript event for inline calls.
        $("#click").click(function(){ 
            $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
            return false;
        });
    });
</script>
<h1>ColorBox Demonstration</h1>
 
<h2>弹性过渡</h2>
<p><a class="group1" href="http://static.oschina.net/uploads/space/2012/0731/153042_m1i8_28.jpg" title="南京源创会">南京源创会</a></p>
<p><a class="group1" href="http://static.oschina.net/uploads/space/2012/0709/105428_4aoW_28.jpg" title="广州源创会">广州源创会</a></p>
<p><a class="group1" href="http://static.oschina.net/uploads/space/2012/0607/142131_2PqS_28.jpg" title="北京源创会">北京源创会</a></p>
 
<h2>渐入过渡</h2>
<p><a class="group2" href="http://static.oschina.net/uploads/space/2012/0731/153042_m1i8_28.jpg" title="南京源创会">南京源创会</a></p>
<p><a class="group2" href="http://static.oschina.net/uploads/space/2012/0709/105428_4aoW_28.jpg" title="广州源创会">广州源创会</a></p>
<p><a class="group2" href="http://static.oschina.net/uploads/space/2012/0607/142131_2PqS_28.jpg" title="北京源创会">北京源创会</a></p>
 
<h2>无过渡，固定宽高（75%屏幕高宽）</h2>
<p><a class="group3" href="http://static.oschina.net/uploads/space/2012/0731/153042_m1i8_28.jpg" title="南京源创会">南京源创会</a></p>
<p><a class="group3" href="http://static.oschina.net/uploads/space/2012/0709/105428_4aoW_28.jpg" title="广州源创会">广州源创会</a></p>
<p><a class="group3" href="http://static.oschina.net/uploads/space/2012/0607/142131_2PqS_28.jpg" title="北京源创会">北京源创会</a></p>
 
<h2>滑动显示</h2>
<p><a class="group4" href="http://static.oschina.net/uploads/space/2012/0731/153042_m1i8_28.jpg" title="南京源创会">南京源创会</a></p>
<p><a class="group4" href="http://static.oschina.net/uploads/space/2012/0709/105428_4aoW_28.jpg" title="广州源创会">广州源创会</a></p>
<p><a class="group4" href="http://static.oschina.net/uploads/space/2012/0607/142131_2PqS_28.jpg" title="北京源创会">北京源创会</a></p>
 
<h2>其他类型</h2>
<p><a class='ajax' href="ajaxColorBox" title="Homer Defined">外部HTML(Ajax)</a></p>
<p><a class='youtube' href="http://www.tudou.com/v/gJQLuWtijdQ/&resourceId=100311153_04_02_99&autoPlay=true/v.swf" title="Apologize现场版">嵌入视频</a></p>
<p><a class='iframe' href="http://ostools.net">外部网页(Iframe)</a></p>
<p><a class='inline' href="#inline_content">内嵌HTML</a></p>
 
<h2>使用回调函数示例</h2>
<p><a class='callbacks' href="http://static.oschina.net/uploads/space/2012/0731/153042_m1i8_28.jpg" title="南京源创会">带有alert示例</a>. 回调函数使得用户能够扩展插件的一部分功能.</p>
<div style="display:none">
    <div id="inline_content" style="padding:10px; background:#fff;">
    <p><strong>This content comes from a hidden element on this page.</strong></p>
    <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
    <p><a id="click" href="#" style="padding:5px; background:#ccc;">Click me, it will be preserved!</a></p>
     
    <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
    <p>Updating Content Example:<br>
    <a class="ajax cboxElement" href="http://static.oschina.net/uploads/space/2012/0607/142131_2PqS_28.jpg">Click here to load new content</a></p>
    </div>
</div>
效果：

ColorBox 演示

代码：在线编辑

效果：

ColorBox 演示

代码： 在线编辑

代码：在线编辑
