1、需要的js

（1）jquery

（2）colorbox (http://www.jacklmoore.com/colorbox/ 下載文件夾，其中有js、css文件)

//加載的時(shí)候注意文件的路徑
<script type="text/javascript"?src="jquery.min.js"></script>
<script type="text/javascript"?src="jquery.colorbox-min.js"></script>

2、需要的css

Example 1-5， 選擇一個(gè)自己比較喜歡的樣式

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

3、需要的html

把你需要用color box這種幻燈片方式加載的內(nèi)容統(tǒng)一用一個(gè)class或者，方面后面提取。如

<p><a?class="colorbox1"??href="../content/ohoopee1.jpg"?>Grouped Photo?1</a></p>
?<p><a?class="colorbox1"?href="../content/ohoopee2.jpg"?>Grouped Photo?2</a></p>
?<p><a?class="colorbox1"?href="../content/ohoopee3.jpg">Grouped Photo?3</a></p>
//這里只是顯示了圖片，如果你需要加載整個(gè)頁面，把href替換成相應(yīng)的頁面地址就行

4、調(diào)用colorbox

<script>
? ? $(document).ready(function(){
? ? ? ??//元素調(diào)用Colorbox的示例
? ? ? ? $(".colorbox1").colorbox({?rel:?'group1'?});
? ??});
</script>

5、colorbox的其他參數(shù)說明

colorbox 的參數(shù)很多，分成幾個(gè)部分

(1)基礎(chǔ)參數(shù)

?參數(shù)	?默認(rèn)值	?作用
? transition	? “elastic”	?彈出窗口的方式，支持”elastic”, “fade”, “none”.
?speed	? 350	?彈出窗口的速度,單位是ms
href	false	動(dòng)態(tài)指定加載的href
title	false	動(dòng)態(tài)指定鏈接的title
rel	false	分組功能，分組之后可以通過上一頁，下一頁查看同一個(gè)分組的其他內(nèi)容。指定了相同ref的元素將分為一組 如：rel:”group1
scalePhotos	true	如果為true,而且定義maxWidth, maxHeight, innerWidth, innerHeight, width, height 那么會(huì)去自動(dòng)去適配
scrolling	true	如果為false，那么即使內(nèi)容超出了彈出框，也會(huì)隱藏滾動(dòng)條
opacity	0.85	彈出框的不透明度，取值范圍：0-1
open	false	如果為true,彈出框會(huì)立即自動(dòng)打開
returnFocus	true	如果為true, 當(dāng)關(guān)閉彈出框之后，會(huì)繼續(xù)focus原來的元素
preloading	true	如果為true, 那么在加載當(dāng)前彈出框的內(nèi)容之后，會(huì)偷偷先加載pre和next的內(nèi)容
overlayClose	true	如果為true, 那么點(diǎn)擊彈出框之外的內(nèi)容時(shí)，自動(dòng)關(guān)閉彈出框
escKey	true	如果為true, 那么按esc鍵之后，自動(dòng)關(guān)閉彈出框
arrowKey	true	如果為true, 那么允許按下 ← → 去展示 pre和next的內(nèi)容
loop	true	如果為true, 那么當(dāng)最后一頁時(shí)，點(diǎn)擊next會(huì)循環(huán)到第一頁
data	false	在ajax加載頁面時(shí)，post 或者 get 過去的數(shù)據(jù)
fadeOut	300	關(guān)閉彈出框的速度，單位是ms
closeButton	true	如果為false, 將會(huì)隱藏 關(guān)閉 按鈕

(2)尺寸相關(guān)

?參數(shù)	?默認(rèn)值	?作用
? width	? false	?設(shè)置彈出框的寬度,包括彈出框的borders 和 button
? height	? false	?設(shè)置彈出框的高度帶,包括彈出框的borders 和 button
? innerWidth	? false	?設(shè)置彈出框的內(nèi)部的寬度，（不包括彈出框的borders 和 button）
? innerHeight	? false	?設(shè)置彈出框的內(nèi)部的高度，（不包括彈出框的borders 和 button）
? initialWidth	? 300	?在內(nèi)容還沒展示時(shí)，彈出框默認(rèn)的寬度
? initialHeight	? 100	?在內(nèi)容還沒展示時(shí)，彈出框默認(rèn)的高度
? maxWidth	? false	?設(shè)置一個(gè)加載內(nèi)容的最大寬度。例如：“100%”，500，“500px”
? maxHeight	? false	?設(shè)置一個(gè)加載內(nèi)容的最大高度。例如：“100%”，500，“500px”<

(3)位置相關(guān)

?參數(shù)	?默認(rèn)值	?作用
? fixed	? false	?如果為true,彈出框 將 顯示在一個(gè)固定的位置
? top	? false	?設(shè)置彈出框的top屬性
? bottom	? false	?設(shè)置彈出框的bottom屬性
? left	? false	?設(shè)置彈出框的left屬性
? right	? false	?設(shè)置彈出框的right屬性
? reposition	? true	?重新加載color box的屬性當(dāng)觸發(fā)了window的resize事件

(4)加載內(nèi)容的type

?參數(shù)	?默認(rèn)值	?作用
? iframe	? false	?如果為true,加載的內(nèi)容將以iframe的方式呈現(xiàn)
? inline	? false	?;如果為true,將從本頁面提取 content, href指定元素的selector $(“#inline”).colorbox({inline:true, href:”#myForm”});
? html	? false	?將加載這里指定的html內(nèi)容 $.colorbox({html:” <p>Hello </p>”});
? photo	? false	?如果為true,將會(huì)以photo的方式加載內(nèi)容 當(dāng)照片自動(dòng)檢測失敗時(shí)才需要使用這個(gè)參數(shù)，(如href是”photo.php”而不是”photo.jpg”,自動(dòng)檢測就會(huì)失敗)
? ajax	?	?—blog主也沒翻譯過來，自行腦補(bǔ)吧—

(5)一些callback函數(shù)定義

?參數(shù)	?默認(rèn)值	?作用
? onOpen	? false	?當(dāng)彈出框要即將要open的時(shí)候觸發(fā)
? onLoad	? false	?當(dāng)彈出框在load內(nèi)容的時(shí)候觸發(fā)
? onComplete	? false	?當(dāng)彈出內(nèi)容加載完畢的時(shí)候觸發(fā)
? onCleanup	? false	?當(dāng)彈出框要即將要close的時(shí)候觸發(fā)
? onClosed	? false	?當(dāng)彈出框close之后的時(shí)候觸發(fā)

可以用以下代碼嘗試一些加載的事件

$(".callbacks").colorbox({
? onOpen:function(){?alert('onOpen: --ifxoxo.com');?},
? onLoad:function(){?alert('onLoad: ?--ifxoxo.com');?},
? onComplete:function(){?alert('onComplete: --ifxoxo.com');?},
? onCleanup:function(){?alert('onCleanup: ?--ifxoxo.com');?},
? onClosed:function(){?alert('onClosed: ?--ifxoxo.com');?}
});

還有其他 Slideshow 和 Retina Images的參數(shù)，具體查看官網(wǎng)。

6、color box的方法

?參數(shù)	?作用
? next()	?翻開Next的內(nèi)容
? prev()	?翻開prev的內(nèi)容
? close()	?關(guān)閉彈出框
? element()	?獲取當(dāng)前的html element
? resize()	?重新加載彈出框的長寬高
? remove()	?去掉當(dāng)前元素的colorbox事件

例子：

{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試colorbox插件</title>{#需要引入js、css文件#}<script src="{% static "components/jquery/dist/jquery.js" %}"></script><script type="text/javascript" src="{% static "ace_source/components/jquery-colorbox/jquery.colorbox.min.js" %}"></script>{#提供example(1~5)種樣式#}<link rel="stylesheet" href="{% static "ace_source/components/jquery-colorbox/example1/colorbox.css" %}"/> </head> <body> <a title="圖片1" href="http://img1.360buyimg.com/da/jfs/t1/9760/30/2437/82328/5bd27862Ef32f4f19/7f9d55580263eed8.jpg" data-rel="colorbox">放大圖片</a> <a title="圖片2" href="http://m.360buyimg.com/babel/jfs/t1/17230/3/997/97174/5c0e3760E1f8e39b1/dac2cec089ccd5c0.jpg" data-rel="colorbox">放大圖片</a> </body> </html> <script>$('[data-rel="colorbox"]').colorbox({rel: 'group_1', //分組transition: "elastic", //彈出窗口的方式，支持”elastic”, “fade”, “none”speed: 350, //彈出速度open: false, //自動(dòng)打開slideshow: true, //輪播方式reposition: true,scalePhotos: true,scrolling: false,//滑動(dòng)previous:"pre",//上一頁文本next:"next", //下一頁文本close:"關(guān)閉",//關(guān)閉文本escKey:true,//esc關(guān)閉closeButton: true,//關(guān)閉按鈕current: '{current} of {total}', //組計(jì)數(shù)器。{current}和{total}為當(dāng)前頁和總數(shù)頁maxWidth: '50%',maxHeight: '50%',onOpen: function () {$overflow = document.body.style.overflow;document.body.style.overflow = 'hidden';},onClosed: function () {document.body.style.overflow = $overflow;},onComplete: function () {$.colorbox.resize();}}); </script>

?

轉(zhuǎn)載于:https://www.cnblogs.com/konglingxi/p/10123675.html

總結(jié)

以上是生活随笔為你收集整理的内容播放colorbox的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。