内容播放colorbox

最新推荐文章于 2021-05-31 16:33:55 发布

weixin_30344795

最新推荐文章于 2021-05-31 16:33:55 发布

阅读量112

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/konglingxi/p/10123675.html

版权

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，选择一个自己比较喜欢的样式

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

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>

转载于:https://www.cnblogs.com/konglingxi/p/10123675.html

weixin_30344795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内容播放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/j...
复制链接

扫一扫