jQuery ColorBox弹出窗口插件

最新推荐文章于 2021-08-05 14:11:15 发布

caichang8

最新推荐文章于 2021-08-05 14:11:15 发布

阅读量1.4k

点赞数 3

分类专栏： jquery插件文章标签：插件 jquery 图片

本文链接：https://blog.csdn.net/caichang8/article/details/49662739

版权

jquery插件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、Colorbox插件介绍

ColorBox是一个基于jQuery 1.3 的轻量级，在压缩后只有10K的大小，自定义灯箱插件，功能非常强大，支持图片，图片组，ajax，inline和iframed内容，灯箱样式完全由用户控制，可自定义CSS样式，不需要改写ColorBox库文件就能重写展示效果设置，支持加载预处理提示等等。

Colorbox项目的主页地址是：http://www.jacklmoore.com/colorbox
项目主页中提供了5种不同样式的Example：

Example 1：http://www.jacklmoore.com/colorbox/example1/
Example 2：http://www.jacklmoore.com/colorbox/example2/
Example 3：http://www.jacklmoore.com/colorbox/example3/
Example 4：http://www.jacklmoore.com/colorbox/example4/
Example 5：http://www.jacklmoore.com/colorbox/example5/

每一个Example中都提供了以下效果：

Elastic Transition（弹性动画）
Fade Transition（淡入淡出动画）
No transition + fixed width and height 75% of screen size (无动画，宽高以屏幕的75%自适应)
Slideshow（幻灯片播放）
Other Content Types （其它类型：外部html, flash和视频，iframe的flash和视频，iframe的外部html，内部html）

二、Colorbox插件的使用

1. 引入jquery和colorbox的js文件

<span style="font-family:SimHei;font-size:14px;"><script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script></span>

2. 引入colorbox的css文件

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

3. html代码

    <h2>弹性效果</h2>
    <p>
      <a class="group1" href="images/ohoopee1.jpg" rel="example1" title="Me and my">GroupedPhoto1</a>
    </p>
    <p>
      <a class="group1" href="images/ohoopee2.jpg" rel="example1" title="On the Ohoopee">Grouped Photo 2</a>
    </p>
    <p>
      <a class="group1" href="images/ohoopee3.jpg" rel="example1" title="On the Ohoopee">Grouped Photo 3</a>
    </p>
    <h2>淡入淡出效果</h2>
    <p>
      <a class="group2" href="images/ohoopee1.jpg" rel="example2" title="Me and my">Grouped Photo 1</a>
    </p>
    <p>
      <a class="group2" href="images/ohoopee2.jpg" rel="example2" title="On the">Grouped Photo 2</a>
    </p>
    <p>
      <a class="group2" href="images/ohoopee3.jpg" rel="example2" title="On the Ohoopee">Grouped Photo 3</a>
    </p>
    <h2>没有动画效果，高度固定（屏幕大小的75%）</h2>
    <p>
      <a class="group3" href="images/ohoopee1.jpg" rel="example3" title="Me and my">Grouped Photo 1</a>
    </p>
    <p>
      <a class="group3" href="images/ohoopee2.jpg" rel="example3" title="On the">Grouped Photo 2</a>
    </p>
    <p>
      <a class="group3" href="images/ohoopee3.jpg" rel="example3" title="On the Ohoopee">Grouped Photo 3</a>
    </p>
    <h2>自动播放</h2>
    <p>
      <a class="group4" href="images/ohoopee1.jpg" rel="example4" title="Me">Grouped Photo 1</a>
    </p>
    <p>
      <a class="group4" href="images/ohoopee2.jpg" rel="example4" title="On the Ohoopee">Grouped Photo 2</a>
    </p>
    <p>
      <a class="group4" href="images/ohoopee3.jpg" rel="example4" title="On">Grouped Photo 3</a>
    </p>

4. 调用colorbox的代码

<script>
		$(document).ready(function() {
		//Examples of how to assign the Colorbox event to elements
		$(".group1").colorbox({
			rel: 'group1'
		});
		$(".test").colorbox({
			rel: 'group2',
			transition: "fade"
		});
		$(".group3").colorbox({
			rel: 'group3',
			transition: "none",
			width: "75%",
			height: "75%"
		});
		$(".group4").colorbox({
			rel: 'group4',
			slideshow: true
		});})
<script/>

5. 最简单示例的完整代码

以上是如何使用的每一个步骤，这里是对上面4个步骤及ajax的JS调用等的整合后的完整示例。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
</head>
<link media="screen" rel="stylesheet" href="css/colorbox.css" />
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script>


<body>
    <h2>弹性效果</h2>
    <p>
      <a class="group1" href="images/ohoopee1.jpg" rel="example1" title="Me and my">GroupedPhoto1</a>
    </p>
    <p>
      <a class="group1" href="images/ohoopee2.jpg" rel="example1" title="On the Ohoopee">Grouped Photo 2</a>
    </p>
    <p>
      <a class="group1" href="images/ohoopee3.jpg" rel="example1" title="On the Ohoopee">Grouped Photo 3</a>
    </p>
    <h2>淡入淡出效果</h2>
    <p>
      <a class="test" href="images/ohoopee1.jpg" rel="example2" title="Me and my">Grouped Photo 1</a>
    </p>
    <p>
      <a class="test" href="images/ohoopee2.jpg" rel="example2" title="On the">Grouped Photo 2</a>
    </p>
    <p>
      <a class="test" href="images/ohoopee3.jpg" rel="example2" title="On the Ohoopee">Grouped Photo 3</a>
    </p>
    <h2>没有动画效果，高度固定（屏幕大小的75%）</h2>
    <p>
      <a class="group3" href="images/ohoopee1.jpg" rel="example3" title="Me and my">Grouped Photo 1</a>
    </p>
    <p>
      <a class="group3" href="images/ohoopee2.jpg" rel="example3" title="On the">Grouped Photo 2</a>
    </p>
    <p>
      <a class="group3" href="images/ohoopee3.jpg" rel="example3" title="On the Ohoopee">Grouped Photo 3</a>
    </p>
    <h2>自动播放</h2>
    <p>
      <a class="group4" href="images/ohoopee1.jpg" rel="example4" title="Me">Grouped Photo 1</a>
    </p>
    <p>
      <a class="group4" href="images/ohoopee2.jpg" rel="example4" title="On the Ohoopee">Grouped Photo 2</a>
    </p>
    <p>
      <a class="group4" href="images/ohoopee3.jpg" rel="example4" title="On">Grouped Photo 3</a>
    </p>
    
    
    <script>
		$(document).ready(function() {
		//Examples of how to assign the Colorbox event to elements
		$(".group1").colorbox({
			rel: 'group1'
		});
		$(".test").colorbox({
			rel: 'group2',
			transition: "fade"
		});
		$(".group3").colorbox({
			rel: 'group3',
			transition: "none",
			width: "75%",
			height: "75%"
		});
		$(".group4").colorbox({
			rel: 'group4',
			slideshow: true
		});
		$(".ajax").colorbox();
		$(".youtube").colorbox({
			iframe: true,
			innerWidth: 640,
			innerHeight: 390
		});
		$(".vimeo").colorbox({
			iframe: true,
			innerWidth: 500,
			innerHeight: 409
		});
		$(".iframe").colorbox({
			iframe: true,
			width: "80%",
			height: "80%"
		});
		$(".inline").colorbox({
			inline: true,
			width: "50%"
		});
		$(".callbacks").colorbox({
			onOpen: function() {
				alert('onOpen: colorbox is about to open');
			},
			onLoad: function() {
				alert('onLoad: colorbox has started to load the targeted content');
			},
			onComplete: function() {
				alert('onComplete: colorbox has displayed the loaded content');
			},
			onCleanup: function() {
				alert('onCleanup: colorbox has begun the close process');
			},
			onClosed: function() {
				alert('onClosed: colorbox has completely closed');
			}
		});
		$('.non-retina').colorbox({
			rel: 'group5',
			transition: 'none'
		});
		 $('.retina').colorbox({
			rel: 'group5',
			transition: 'none',
			retinaImage: true,
			retinaUrl: true
		});
		//Example of preserving a JavaScript event for inline calls.
		$("#click").click(function() {
			$('#click').css({
				"background-color": "#f00",
				"color": "#fff",
				"cursor": "inherit"
			}).text("Open this window again and this message will still be here.");
			return false;
		});
	});
    </script>
</body>
</html>

三、使用ColorBox灯箱显示Iframed框架内容效果

(1)js部分
$("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true});

contentIframe设置ColorBox灯箱的内容是否为框架

(2)HTML部分
<p><a id="google" href="http://www.google.com">Iframed内容</a></p>

ColorBox灯箱配置如下：
transition 'elastic' 表示灯箱过渡效果，可选"elastic" or "fade"
transitionSpeed 350 表示灯箱过渡效果展示的速度
initialWidth 300    表示灯箱初始化宽度
initialHeight 100    表示灯箱初始化高度
contentWidth false   表示是否设置一个固定的宽度
contentHeight false    表示是否设置一个固定的高度
contentAjax false    表示是否是一个ajax加载
contentInline false    表示是否是一个inline
contentIframe false   表示是否是一个iframe
bgOpacity 0.85      表示灯箱的背景透明度
preloading true   表示是否预加载
contentCurrent '{current} of {total}' 表示灯箱展示的当前图片和总数
contentPrevious 'previous' 表示上一个锚，类似于rel属性
contentNext 'next' 表示下一个锚，类似于rel属性
modalClose 'close'   锚文本关闭链接，可选Esc或close

caichang8

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery ColorBox弹出窗口插件

一、Colorbox插件介绍ColorBox是一个基于jQuery 1.3 的轻量级，在压缩后只有10K的大小，自定义灯箱插件，功能非常强大，支持图片，图片组，ajax，inline和iframed内容，灯箱样式完全由用户控制，可自定义CSS样式，不需要改写ColorBox库文件就能重写展示效果设置，支持加载预处理提示等等。Colorbox项目的主页地址是：http://
复制链接

扫一扫