jQuery Colorbox使用教程

jQuery Colorbox是一款彈出層，內容播放插件，效果極佳，最關鍵的是大小隻有10KB，固然我主要是用來彈出圖片啦，(以前介紹過jquery Fancybox插件，我的很喜歡)。jQuery Colorbox不只有彈性動畫效果，淡入淡出效果，幻燈片播放,寬度自定義，還可以ajax加載html,iframe等等，最主要的是它還能夠寫回調函數。廢話少說，請看5種演示效果：

http://www.phpddt.com/demo/colorbox/example1/

http://www.phpddt.com/demo/colorbox/example2/ 

http://www.phpddt.com/demo/colorbox/example3/

http://www.phpddt.com/demo/colorbox/example4/

http://www.phpddt.com/demo/colorbox/example5/ 

使用固然很是簡單：
首先引入jquery，colorbox插件，colorbox的css

<script type="text/javascript" src="http://www.phpddt.com/usr/themes/dddefault/jquery-1.4.2.min.js"></script>
<script src="http://www.phpddt.com/demo/colorbox/colorbox/jquery.colorbox.js"></script>
<link media="screen" rel="stylesheet" href="http://www.phpddt.com/demo/colorbox/colorbox/colorbox.css" />

而後看html代碼

        <p><a class="group1" data-rel='hi' href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">第一組圖片演示</a></p>
        <p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">第一組圖片演示</a></p>
        <p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">第一組圖片演示</a></p>

調用colorbox代碼：

<script>
    $(document).ready(function(){
        $(".group1").colorbox({ rel: 'group1' });
    });
</script>

固然更多教程請移步官網：http://www.jacklmoore.com/colorbox/
附上jquery colorbox設置翻譯：