当前位置:主页 > jquery插件 > 弹出提示 >

Colorbox弹出层插件

栏目分类:弹出提示   模板编号:JQ00048    发布日期:2017-05-12   来源:网络   浏览次数:次     在线预览
jquery弹出层插件jquery.ColorBox 5种弹出风格

使用说明

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="../colorbox/jquery.colorbox.js"></script>

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

<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;
    });
});


在线演示 立即下载
打赏本站
云盘密码:uboc

标签: 弹出层 Colorbox

Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载