内容播放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, 选择一个自己比较喜欢的样式
3、需要的html
把你需要用color box这种幻灯片方式加载的内容统一用一个class或者,方面后面提取。如
<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
$(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之后的时候触发 |
可以用以下代码尝试一些加载的事件
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>
内容播放colorbox的更多相关文章
- python 全栈开发,Day127(app端内容播放,web端的玩具,app通过websocket远程遥控玩具播放内容,玩具管理页面)
昨日内容回顾 1. 小爬爬 内容采集 XMLY 的 儿童频道 requests 2. 登陆 注册 自动登陆 退出 mui.post("请求地址",{数据},function(){} ...
- app端内容播放,web端的玩具,app通过websocket远程遥控玩具播放内容,玩具管理页面
一.app端内容播放 下载代码 https://github.com/987334176/Intelligent_toy/archive/v1.0.zip 注意:由于涉及到版权问题,此附件没有图片和音 ...
- jQuery Colorbox弹窗插件使用教程小结、属性设置详解
jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦. jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax ...
- jQuery Colorbox插件
http://www.open-open.com/lib/view/open1338084606042.html jQuery Colorbox是一款非常好的内容播放插件.它集弹出层.幻灯片播放功能于 ...
- jQuery Colorbox是一款弹出层
jQuery Colorbox使用教程 jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,最关键的是大小只有10KB,当然我主要是用来弹出图片啦,(之前介绍过jquery Fancy ...
- jQuery Colorbox弹窗插件使用教程小结、属性设置详解以及colorbox关闭
jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦. jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax ...
- jQuery Colorbox使用教程
jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,最关键的是大小只有10KB,当然我主要是用来弹出图片啦,(之前介绍过jquery Fancybox插件,个人很喜欢).jQuery ...
- 第38章 I2S—音频播放与录音输入—零死角玩转STM32-F429系列
第38章 I2S—音频播放与录音输入 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/ ...
- 使用python打造一款音乐播放器
作者qq:64761294 编程/考试交流群:834531270 欢迎交流 核心播放模块(pygame内核) import time import pygame import easygui as g ...
随机推荐
- Qt多线程编程中的对象线程与函数执行线程
近来用Qt编写一段多线程的TcpSocket通信程序,被其中Qt中报的几个warning搞晕了,一会儿是说“Cannot create children for a parent that is in ...
- STL容器基本功能与分类
STL有7中容器. 分别为: vector 向量 <vector>(头文件) 随机访问容器.顺序容器 deque 双端队列 <deque> 随机访问容器.顺序容器 list ...
- nanosleep()
函数原型 #include <time.h> int nanosleep(const struct timespec *rqtp, struct timespec *rmtp); 描述 ...
- jdbc一次性采集mysql和oracle的海量数据,5000W+为例
最近做的采集工具遇到采集一天数据(超过5000W行数据)的情况, 采集mysql的时候直接采用流式读取的方式可以一次全部都读取出来,速度的话取决于网络速度 stmt = conn.createStat ...
- Bootstrap FileInput中文API文档
Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...
- No.13 selenium for python 单选框和复选框
单选框 radio 点击图标,可以获取HTML中定位. 使用普通的ID定位就可以了 定位到指定元素,然后使用clicd选中即可 复选框 checkbox 勾选单个框,跟单选框一样,定位后点击就可以了 ...
- Selenium_多线程执行测试用例
多线程执行测试用例 这里以百度搜索为例,通过不同的浏览器来启动不同的线程. #!/usr/bin/env python # _*_ coding:utf-8 _*_ __author__ = 'Yin ...
- INSTEAD OF与AFTER触发器
INSTEAD OF 触发器 AFTER 触发器(也叫“FOR”触发器)会在触发 insert.update 或是delect 动作之后执行.例如,一个 Employees 表上的 AFTER 触发器 ...
- Linux学习笔记:cp和scp复制文件
拷贝文件和文件夹,在Linux上通过cp命令来实现. cp:用户当前机器的文件复制 scp:通过ssh本机和其他机器的文件复制 secure copy cp a.txt b.txt scp a.txt ...
- 【Java】java.lang.NullPointerException的两个原因
自己写程序时出现过 java.lang.NullPointerException错误的一些原因 (1)自己建立了一个数组,但每个数组元素没单独初始化(单独new一个新对象). (2)在进行if (ar ...