jQuery Colorbox使用教程

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设置翻译：

 

posted on 2013-09-04 17:48 mckee1990 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/phpddt/p/3301492.html