当前位置: 首页 > 工具软件 > ColorBox > 使用案例 >

jquery的图片播放插件 - colorbox

子车才捷
2023-12-01


一. 什么是 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代码

  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

这段带有URI的声明可以将所有浏览器设定到标准模式

Html代码

  1. <!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代码

  1. .AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png 

正确的路径:

Html代码

  1. .AlphaImageLoader(src=/images/internet_explorer/borderTopLeft.png 

正确的绝对路径:

Html代码

  1. .AlphaImageLoader(src=http://your_domain.com/images/internet_explorer/borderTopLeft.png 

6,尝试载入外部页面却获得”Request unsuccessful”的报错信息

这可能是因为你尝试载入一个无效的URL或者ajax的方式载入其他域名下的文件。由于浏览器的限制,ajax方式必须载入与其在同一域名下的文件。并且ajax需要有服务器支持,如果本地测试必须安装apache服务。

7,如何通过rel属性关闭colorbox的群组功能

Js代码

  1. $(‘a[rel="examples"]‘).colorbox({rel:’nofollow’}); 

8,JavaScript/jQuery 在colorbox中不工作 
这多数是因为在元素还没有载入到文档中时就尝试访问它,解决的方法是将这些js代码应道到colorbox的onComplete调用中。

例如: (使用 jQuery Forms 插件:

Js代码

  1. $(‘#login_window’).colorbox({onComplete:function(){ 
  2. $(‘form#login’).ajaxForm(); 
  3. }}); 

9,在iframe外面打开colorbox

任何在iframe中打开的内容都会被限制在iframe中,除非你将colorbox放到它的上一级窗口中。你可以从iframe中返回parent窗口打开colorbox。

Js代码

  1. Example: 
  2. <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
})



 类似资料: