jQuery ColorBox彈出窗口插件

一、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

jQuery ColorBox彈出窗口插件

一、Colorbox插件介紹

二、Colorbox插件的使用

三、使用ColorBox燈箱顯示Iframed框架內容效果

工作中用到的腳本合集

微服務實踐Aspire項目發佈到遠程k8s集羣

通過f-string編寫簡潔高效的Python格式化輸出代碼

[轉帖]20個常用的Linux工具命令

[轉帖]PostgreSQL從小白到高手教程 - 第46講：poc-tpch測試

24-5-18 X

xhEditor使用指南

jQuery ColorBox彈出窗口插件

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結