jQuery ColorBox彈出視窗外掛
阿新 • • 發佈：2018-12-23
一、Colorbox外掛介紹
ColorBox是一個基於jQuery 1.3 的輕量級，在壓縮後只有10K的大小，自定義燈箱外掛，功能非常強大，支援圖片，圖片組，ajax，inline和iframed內容，燈箱樣式完全由使用者控制，可自定義CSS樣 式，不需要改寫ColorBox庫檔案就能重寫展示效果設定，支援載入預處理提示等等。
每一個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" /><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