内容播放colorbox

时间：2023-03-09 15:46:24
内容播放colorbox

1、需要的js

（1）jquery

（2）colorbox (http://www.jacklmoore.com/colorbox/ 下载文件夹，其中有js、css文件)

//加载的时候注意文件的路径
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>

2、需要的css

Example 1-5， 选择一个自己比较喜欢的样式

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

3、需要的html

把你需要用color box这种幻灯片方式加载的内容统一用一个class或者，方面后面提取。如

 <p><a class="colorbox1"  href="../content/ohoopee1.jpg" >Grouped Photo 1</a></p>
 <p><a class="colorbox1" href="../content/ohoopee2.jpg" >Grouped Photo 2</a></p>
 <p><a class="colorbox1" href="../content/ohoopee3.jpg">Grouped Photo 3</a></p>
//这里只是显示了图片，如果你需要加载整个页面，把href替换成相应的页面地址就行

4、调用colorbox

<script>
    $(document).ready(function(){
        //元素调用Colorbox的示例
        $(".colorbox1").colorbox({ rel: 'group1' });
    });
</script>

5、colorbox的其他参数说明

colorbox 的参数很多，分成几个部分

(1)基础参数

 参数  默认值  作用
  transition   “elastic”  弹出窗口的方式，支持”elastic”, “fade”, “none”.
 speed   350  弹出窗口的速度,单位是ms
href false 动态指定加载的href
title false 动态指定链接的title
rel false 分组功能，分组之后可以通过上一页，下一页查看同一个分组的其他内容。指定了相同ref的元素将分为一组
如：rel:”group1
scalePhotos true 如果为true,而且定义maxWidth, maxHeight, innerWidth, innerHeight, width, height
那么会去自动去适配
scrolling true 如果为false，那么即使内容超出了弹出框，也会隐藏滚动条
opacity 0.85 弹出框的不透明度，取值范围：0-1
open false 如果为true,弹出框会立即自动打开
returnFocus true 如果为true, 当关闭弹出框之后，会继续focus原来的元素
preloading true 如果为true, 那么在加载当前弹出框的内容之后，会偷偷先加载pre和next的内容
overlayClose true 如果为true, 那么点击弹出框之外的内容时，自动关闭弹出框
escKey true 如果为true, 那么按esc键之后，自动关闭弹出框
arrowKey true 如果为true, 那么允许按下 ← → 去展示 pre和next的内容
loop true 如果为true, 那么当最后一页时，点击next会循环到第一页
data false 在ajax加载页面时，post 或者 get 过去的数据
fadeOut 300 关闭弹出框的速度，单位是ms
closeButton true 如果为false, 将会隐藏 关闭 按钮

(2)尺寸相关

 参数  默认值  作用
  width   false  设置弹出框的宽度,包括弹出框的borders 和 button
  height   false  设置弹出框的高度带,包括弹出框的borders 和 button
  innerWidth   false  设置弹出框的内部的宽度，（不包括弹出框的borders 和 button）
  innerHeight   false  设置弹出框的内部的高度，（不包括弹出框的borders 和 button）
  initialWidth   300  在内容还没展示时，弹出框默认的宽度
  initialHeight   100  在内容还没展示时，弹出框默认的高度
  maxWidth   false  设置一个加载内容的最大宽度。例如：“100%”，500，“500px”
  maxHeight   false  设置一个加载内容的最大高度。例如：“100%”，500，“500px”<

(3)位置相关

 参数  默认值  作用
  fixed   false  如果为true,弹出框 将 显示在一个固定的位置
  top   false  设置弹出框的top属性
  bottom   false  设置弹出框的bottom属性
  left   false  设置弹出框的left属性
  right   false  设置弹出框的right属性
  reposition   true  重新加载color box的属性当触发了window的resize事件

(4)加载内容的type

 参数  默认值  作用
  iframe   false  如果为true,加载的内容将以iframe的方式呈现
  inline   false  ;如果为true,将从本页面提取 content, href指定元素的selector
$(“#inline”).colorbox({inline:true, href:”#myForm”});
  html   false  将加载这里指定的html内容
$.colorbox({html:” <p>Hello </p>”});
  photo   false  如果为true,将会以photo的方式加载内容
当照片自动检测失败时才需要使用这个参数，(如href是”photo.php”而不是”photo.jpg”,自动检测就会失败)
  ajax    —blog主也没翻译过来，自行脑补吧—

(5)一些callback函数定义

 参数  默认值  作用
  onOpen   false  当弹出框要即将要open的时候触发
  onLoad   false  当弹出框在load内容的时候触发
  onComplete   false  当弹出内容加载完毕的时候触发
  onCleanup   false  当弹出框要即将要close的时候触发
  onClosed   false  当弹出框close之后的时候触发

可以用以下代码尝试一些加载的事件

$(".callbacks").colorbox({
  onOpen:function(){ alert('onOpen: --ifxoxo.com'); },
  onLoad:function(){ alert('onLoad:  --ifxoxo.com'); },
  onComplete:function(){ alert('onComplete: --ifxoxo.com'); },
  onCleanup:function(){ alert('onCleanup:  --ifxoxo.com'); },
  onClosed:function(){ alert('onClosed:  --ifxoxo.com'); }
});

还有其他 Slideshow 和 Retina Images的参数，具体查看官网。

6、color box的方法

 参数  作用
  next()  翻开Next的内容
  prev()  翻开prev的内容
  close()  关闭弹出框
  element()  获取当前的html element
  resize()  重新加载弹出框的长宽高
  remove()  去掉当前元素的colorbox事件

例子：

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试colorbox插件</title>
    {#需要引入js、css文件#}
    <script src="{% static "components/jquery/dist/jquery.js" %}"></script>
    <script type="text/javascript" src="{% static "ace_source/components/jquery-colorbox/jquery.colorbox.min.js" %}"></script>
    {#提供example(1~5)种样式#}
    <link rel="stylesheet" href="{% static "ace_source/components/jquery-colorbox/example1/colorbox.css" %}"/>
</head>
<body>
<a title="图片1" href="http://img1.360buyimg.com/da/jfs/t1/9760/30/2437/82328/5bd27862Ef32f4f19/7f9d55580263eed8.jpg" data-rel="colorbox">放大图片</a>
<a title="图片2" href="http://m.360buyimg.com/babel/jfs/t1/17230/3/997/97174/5c0e3760E1f8e39b1/dac2cec089ccd5c0.jpg" data-rel="colorbox">放大图片</a>
</body>
</html>
<script>
    $('[data-rel="colorbox"]').colorbox({
        rel: 'group_1', //分组
        transition: "elastic", //弹出窗口的方式，支持”elastic”, “fade”, “none”
        speed: 350, //弹出速度
        open: false, //自动打开
        slideshow: true, //轮播方式
        reposition: true,
        scalePhotos: true,
        scrolling: false,//滑动
        previous:"pre",//上一页文本
        next:"next", //下一页文本
        close:"关闭",//关闭文本
        escKey:true,//esc关闭
        closeButton: true,//关闭按钮
        current: '{current} of {total}', //组计数器。{current}和{total}为当前页和总数页
        maxWidth: '50%',
        maxHeight: '50%',
        onOpen: function () {
            $overflow = document.body.style.overflow;
            document.body.style.overflow = 'hidden';
        },
        onClosed: function () {
            document.body.style.overflow = $overflow;
        },
        onComplete: function () {
            $.colorbox.resize();
        }
    });
</script>

相关文章