Colorbox弹出层插件

查看演示立即下载

插件描述：jquery弹出层插件jquery.ColorBox 5种弹出风格

使用说明

1、引入jquery核心库和ColorBox脚本文件

1 2	`<script` `src="/"></script>` `<script` `src="../colorbox/jquery.colorbox.js"></script>`

2、引入ColorBox样式表文件，注意引入不同皮肤的css文件将实现不同的皮肤

1	`<link` `media="screen"` `rel="stylesheet"` `href="colorbox.css"` `/>`

3、html代码

<h2>弹性效果</h2>
<p>
  <a href="../content/ohoopee1.jpg"rel="example1" title="Me and my">GroupedPhoto1</a>
</p>
<p>
  <a href="../content/ohoopee2.jpg"rel="example1" title="On the Ohoopee">Grouped Photo 2</a>
</p>
<p>
  <a href="../content/ohoopee3.jpg"rel="example1" title="On the Ohoopee">Grouped Photo 3</a>
</p>
<h2>淡入淡出效果</h2>
<p>
  <a href="../content/ohoopee1.jpg"rel="example2" title="Me and my">Grouped Photo 1</a>
</p>
<p>
  <a href="../content/ohoopee2.jpg"rel="example2" title="On the">Grouped Photo 2</a>
</p>
<p>
  <a href="../content/ohoopee3.jpg"rel="example2" title="On the Ohoopee">Grouped Photo 3</a>
</p>
<h2>没有动画效果，高度固定（屏幕大小的75%）</h2>
<p>
  <a href="../content/ohoopee1.jpg"rel="example3" title="Me and my">Grouped Photo 1</a>
</p>
<p>
  <a href="../content/ohoopee2.jpg"rel="example3" title="On the">Grouped Photo 2</a>
</p>
<p>
  <a href="../content/ohoopee3.jpg"rel="example3" title="On the Ohoopee">Grouped Photo 3</a>
</p>
<h2>自动播放</h2>
<p>
  <a href="../content/ohoopee1.jpg"rel="example4" title="Me">Grouped Photo 1</a>
</p>
<p>
  <a href="../content/ohoopee2.jpg"rel="example4" title="On the Ohoopee">Grouped Photo 2</a>
</p>
<p>
  <a href="../content/ohoopee3.jpg"rel="example4" title="On">Grouped Photo 3</a>
</p>

4、jquery初始化代码

$(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: 640,
        innerHeight: 390
    });
    $(".vimeo").colorbox({
        iframe: true,
        innerWidth: 500,
        innerHeight: 409
    });
    $(".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');
        }
    });
    $('.non-retina').colorbox({
        rel: 'group5',
        transition: 'none'
    }) $('.retina').colorbox({
        rel: 'group5',
        transition: 'none',
        retinaImage: true,
        retinaUrl: true
    });
    //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;
    });
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery图片播放弹出插件Fancybox
下一个特效：浮动固定位置插件Portamento