jquery的图片播放插件 - colorbox
一. 什么是 Colorbox ?
Jquery的一个轻量的,可自定义的 lightbox 插件。
二. 为什么选择Colorbox?
- 支持图片,图片组,图片滑动观看,ajax,行内元素和iframe内容
- 十分轻量,只有不到9KB大小
- 外观可以通过CSS进行控制
- 可以直接覆盖ColorBox的行为设置而不用改ColorBox的JS文件
- 可以直接加上回调函数和事件钩子而不用更改它的源代码
- 非入侵式操作,选项可以在JS中设置而不用更改HTML
- 可以预载背景图片和图片组中的图片
- 用Jquery插件格式编写,可以使用链式操作
- 语法通过W3C和XHTML认证,没有添加JS的全局变量
- 在 MIT License下发布 (这个我也不懂)
三.说明:
colorbox()函数使用一堆key/value对象和一个可选的callback函数
格式:$('selector').colorbox({key:value}, callback);
例子: $('a.gallery').colorbox({transition:'fade', speed:500});
还是例子:$('button').colorbox({href:"thankyou.html"});
四.注意事项:
1,flash覆盖colorbox:
这不是colorbox本身的问题,flash默认会覆盖所有的HTML内容,你可以设置wmode参数为transparent来避免这个问题。
2,colorbox在ie中的位置和行为异常:
这有可能是doctype(DTD)问题。colorbox需要有个有效的DTD声明,否则浏览器会以怪异模式(quirks mode,在标准模式中,浏览器根据W3C所定的规范来显示页面;而在怪异模式中,页面将以IE5,甚至IE4的显示页面的方式来表现,以保持以前的网 页能正常显示)呈现网页内容。务必使用正确的DTD声明来确保浏览器以标准模式呈现网页。
下面这段声明会将IE浏览器设定成怪异模式
Html代码
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
这段带有URI的声明可以将所有浏览器设定到标准模式
Html代码
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
3,colorbox的位置和行为异常(不区分浏览器):
这可能是源文件引用顺序错误导致的。JQuery和colorbox.css必须在jquery.colorbox.js之前引入,并且应该在JQuery的ready方法中调用colorbox,并且此调用要在引入jquery.colorbox.js之后
4,用colorbox显示外部文档时显示不正确:
这是由于没有将iframe参数设为true。默认的方式只能正确显示可以在body标签中存在的内容。
如果你想显示一个完整的html文档(包括<html>、<head>和<body>等标签),那么要是用iframe参数。并且要设定高度和宽度,因为colorbox无法得知位于iframe内的网页内容的宽高。
另外,如果你想载入一段位于相同域名下的另一个文档的部分内容,可以使用下面的方法
Js代码
$(‘#example’).colorbox({href:”document.html div#content”});
5,在ie中colorbox的边框不显示:
colorbox中提供的例子中有些使用了png图片的透明度效果。IE6不支持alpha透明度,并且在IE7和IE8中也会出现黑底的效果。colorbox使用IE的css滤镜解决了这个问题,你可以再colorbox.css文件中看到这些代码。在例子中使用了相对路径,但用户将colorbox应用到自己的网站时经常更改image文件夹相对于css的路径。滤镜的路径也需要有相应的变动。请看下面的例子,假设你的images文件夹位于根目录下。
在css文件中使用了错误的相对路径:
Html代码
- .AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png
正确的路径:
Html代码
- .AlphaImageLoader(src=/images/internet_explorer/borderTopLeft.png
正确的绝对路径:
Html代码
- .AlphaImageLoader(src=http://your_domain.com/images/internet_explorer/borderTopLeft.png
6,尝试载入外部页面却获得”Request unsuccessful”的报错信息
这可能是因为你尝试载入一个无效的URL或者ajax的方式载入其他域名下的文件。由于浏览器的限制,ajax方式必须载入与其在同一域名下的文件。并且ajax需要有服务器支持,如果本地测试必须安装apache服务。
7,如何通过rel属性关闭colorbox的群组功能
Js代码
- $(‘a[rel="examples"]‘).colorbox({rel:’nofollow’});
8,JavaScript/jQuery 在colorbox中不工作
这多数是因为在元素还没有载入到文档中时就尝试访问它,解决的方法是将这些js代码应道到colorbox的onComplete调用中。
例如: (使用 jQuery Forms 插件:
Js代码
- $(‘#login_window’).colorbox({onComplete:function(){
- $(‘form#login’).ajaxForm();
- }});
9,在iframe外面打开colorbox
任何在iframe中打开的内容都会被限制在iframe中,除非你将colorbox放到它的上一级窗口中。你可以从iframe中返回parent窗口打开colorbox。
Js代码
- Example:
- <a href=’login.php’ οnclick=’parent.$.fn.colorbox({href:”login.php”}); return false;’>Open from parent</a>
这种方法不能用于group方式,因为parent文档无法访问iframe里的内容,也就无法访问内部元素的rel属性。
colorbox 弹出窗口,但是没有内容
添加属性:transition: "elastic", 即可,理由不明。
五.使用:
1) 引入css:
<link rel="stylesheet" type="text/css" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css">
2)引入js:
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
3)html代码:
<ul class="ace-thumbnails"><c:forEach items="${attach_sb }" var="item"><li><a href="<%=base %>/work/file/viewFull/${item.id }.do?<span style="background-color: rgb(255, 0, 0);">.jpg</span>" data-rel="colorbox"><img src="<%=base %>/work/file/view/${item.id }.do" /></a></li></c:forEach></ul>
<span style="background-color: rgb(255, 0, 0);">.jpg</span>
特别注意下:这里必须以图片格式结尾
4)jquery写入:
jQuery(function($) {var colorbox_params = {reposition:true,scalePhotos:true,scrolling:false,previous:'<i class="icon-arrow-left"></i>',next:'<i class="icon-arrow-right"></i>',close:'×',current:'{current} of {total}',maxWidth:'100%',maxHeight:'100%',slideshow:true,slideshowStart:'start',slideshowStop:'stop',onOpen:function(){document.body.style.overflow = 'hidden';},onClosed:function(){document.body.style.overflow = 'auto';},onComplete:function(){$.colorbox.resize();}};$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);$("#cboxLoadingGraphic").append("<i class='icon-spinner orange'></i>");//let's add a custom loading icon
})
jquery的图片播放插件 - colorbox相关推荐
- jQuery图片播放插件prettyPhoto使用介绍
演示效果 http://www.17sucai.com/preview/131993/2014-07-09/mac-Bootstrap/gallery.html 点击之后的效果 使用方法 Query ...
- java 图片插件_[Java教程]10款功能强大的jQuery/CSS3图片特效插件
[Java教程]10款功能强大的jQuery/CSS3图片特效插件 0 2014-11-26 03:01:04 1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网 ...
- jQuery实现图片播放器插件
jquery 图片播放器插件 文章原创,欢迎转载,转载请注明出处:http://blog.csdn.net/xxd851116 作者:笑的自然 我的博客:http://blog.csdn.net/x ...
- flashSlider——基于Jquery的图片展示插件
大多数的jquery图片幻灯片插件都只是提供了"上一个""下一个"操作,没有实现数字导航,比如Easy Slider ,写这个插件也主要是在Easy Slide ...
- 几个jQuery的图片裁剪插件
[url]http://hi.baidu.com/coffeant/item/9931bd684220d237ac3e8396[/url] 项目里最近也要用到图片裁剪插件,刚巧发现了几个就记录在这里. ...
- 分享8款简单大气的jQuery/CSS3图片特效
自从jQuery问世以后,网页上就流行很多漂亮的图片效果,像淡入淡出或者焦点图等,但是,现在jQuery结合CSS3,我们可以打造更美观更实用的图片特效.下面分享8款简单而又大气的jQuery/CSS ...
- html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- html图片播放器,imgplay-基于canvas的图片序列播放jQuery插件
imgplay是一款基于HTML5 canvas的图片序列播放jQuery插件.通过该插件可以实现一组图片的轮流播放,你还可以进行暂停.快进.后退操作,并且可以进入全屏模式进行图片观看. 使用方法 使 ...
- 可进可退,jQuery图片、视频、flash播放插件prettyPhoto使用记录
一.prettyPhoto简介 prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件,它不仅支持图片,还同时支持视频.flash.YouTube.iframe和aja ...
- jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
最新文章
- Ubuntu 14.04 64bit上curl-7.37源码包中的sample 源码示例研究
- linux cat代码,linux cat命令(示例代码)
- 搭建Apache Mina框架并实现Server与Client端的简单消息传递
- iOS客户端流量统计
- Jmeter系列之接口断言
- iOS开发之控制器的创建
- vue的table组件
- HBase的java操作,最新API。(查询指定行、列、插入数据等)
- 【分类汇总】110 天以来的题解分类汇总
- 华为rh5885服务器oid_高性能全冗余 华为RH5885 V3服务器解析
- Yocto(一)-介绍
- 文化财经SAR指标计算(一)
- V$LOGMNR_CONTENTS字段含义
- put url带参数_Superlurl 一款开源关键词URL采集工具
- HCIP-DATACOM H12-831(1-20)
- app运营业绩统计管理框架模板
- pikachu-XSS(跨站脚本攻击)
- 叉乘点乘混合运算公式_初中数学根式运算法则公式
- AWS IoT 物联网设备 - 即时部署 JITP 实战
- 打造高效研发团队 (2) —— 研发流程篇
热门文章
- Django 中文本地化汉化方法
- netbeans插件推荐
- 点燃创业引擎的天使投资
- Clickhouse优点 缺点 / Doris 优点 缺点
- 普通话测试-短文60篇文章,附带拼音(51-60篇)
- 火爆!GitHub 标星 144k 的前后端学习路线,2021 年最新整理,看完后不再迷茫不再徘徊
- mysql批量插入on duplicate key update
- Geronimo tomcat: 在 Apache Geronimo 插件体系中将 Apache Tomcat 这个优秀的 Web 容器整合至其中...
- 企业版IDP的申请及“In House”发布
- html骨架效果,html5 页面基本骨架