query插件（三）：Colorbox–內容播放插件

原文網址：http://ifxoxo.com/jquery-colorbox.html

1、colorbox介紹

jQuery Colorbox是一款很是好的內容播放插件。
它集彈出層、幻燈片播放功能於一身，不只於此，它還支持其它的內容格式：例如html, flash, iframe等，這些內容的顯示方式都是Ajax的。
更難能難得的是，在壓縮後它只有10K的大小，使用這款插件不會給你的網頁帶來過多的負擔，並且還能實現很棒的視覺效果，爲用戶體驗增色很多。
並且能夠更加本身的喜愛，修改colorbox彈出框的樣式，很是靈活。

本文已經同步至個人我的博客站點：
jquery插件（三）：Colorbox–內容播放插件(http://ifxoxo.com/jquery-colorbox.html)

若是想要看實例，能夠到如下網址查看：
520小美女(http://520xmn.com)

colorbox的示例截圖以下：

colorbox的截圖–ifxoxo.com

 

Colorbox項目的主頁地址是：http://www.jacklmoore.com/colorbox 
項目主頁中提供了5種不一樣樣式的Example：

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

每個 樣式 中都提供瞭如下效果：

• 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）

2、具體用法

一、須要的js

（1）jquery

既然是jquery插件，確定是須要先加載jquery的,能夠到jquery官網去下載最新的jquery：http://jquery.com/

（2）colorbox

到http://www.jacklmoore.com/colorbox 去下載最新的 color box插件，
在裏面找到一個 jquery.colorbox-min.js

如：

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

二、須要的css

color-box 的彈出框的樣式是須要定義的，你能夠先查看官網的Example 1-5， 選擇一個本身比較喜歡的樣式，到下載下來中去尋找相應的example文件夾，找到coloxbox.css。
好比我的喜歡example 5， 那麼就加載example5文件夾中的的css

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

三、須要的html

把你須要用color box這種幻燈片方式加載的內容統一用一個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 >
//這裏只是顯示了圖片，若是你須要加載整個頁面，把href替換成相應的頁面地址就行

四、調用color box

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

五、color box的其餘參數說明

color box 的參數不少，分紅幾個部分

(1)基礎參數

參數	默認值	做用
transition	「elastic」	彈出窗口的方式，支持」elastic」, 「fade」, 「none」.
speed	350	彈出窗口的速度,單位是ms
href	false	動態指定加載的href
title	false	動態指定連接的title
rel	false	分組功能，分組以後能夠經過上一頁，下一頁查看同一個分組的其餘內容。指定了相同ref的元素將分爲一組 如：rel:」group1
scalePhotos	true	若是爲true,並且定義maxWidth, maxHeight, innerWidth, innerHeight, width, height 那麼會去自動去適配
scrolling	true	若是爲false，那麼即便內容超出了彈出框，也會隱藏滾動條
opacity	0.85	彈出框的不透明度，取值範圍：0-1
open	false	若是爲true,彈出框會當即自動打開
returnFocus	true	若是爲true, 當關閉彈出框以後，會繼續focus原來的元素
preloading	true	若是爲true, 那麼在加載當前彈出框的內容以後，會偷偷先加載pre和next的內容
overlayClose	true	若是爲true, 那麼點擊彈出框以外的內容時，自動關閉彈出框
escKey	true	若是爲true, 那麼按esc鍵以後，自動關閉彈出框
arrowKey	true	若是爲true, 那麼容許按下 ← → 去展現 pre和next的內容
loop	true	若是爲true, 那麼當最後一頁時，點擊next會循環到第一頁
data	false	在ajax加載頁面時，post 或者 get 過去的數據
fadeOut	300	關閉彈出框的速度，單位是ms
closeButton	true	若是爲false, 將會隱藏 關閉 按鈕

(2)尺寸相關

參數	默認值	做用
width	false	設置彈出框的寬度,包括彈出框的borders 和 button
height	false	設置彈出框的高度帶,包括彈出框的borders 和 button
innerWidth	false	設置彈出框的內部的寬度，（不包括彈出框的borders 和 button）
innerHeight	false	設置彈出框的內部的高度，（不包括彈出框的borders 和 button）
initialWidth	300	在內容還沒展現時，彈出框默認的寬度
initialHeight	100	在內容還沒展現時，彈出框默認的高度
maxWidth	false	設置一個加載內容的最大寬度。例如：「100%」，500，「500px」
maxHeight	false	設置一個加載內容的最大高度。例如：「100%」，500，「500px」<

(3)位置相關

參數	默認值	做用
fixed	false	若是爲true,彈出框 將 顯示在一個固定的位置
top	false	設置彈出框的top屬性
bottom	false	設置彈出框的bottom屬性
left	false	設置彈出框的left屬性
right	false	設置彈出框的right屬性
reposition	true	從新加載color box的屬性當觸發了window的resize事件

(4)加載內容的type

參數	默認值	做用
iframe	false	若是爲true,加載的內容將以iframe的方式呈現
inline	false	;若是爲true,將從本頁面提取 content, href指定元素的selector $(「#inline」).colorbox({inline:true, href:」#myForm」});
html	false	將加載這裏指定的html內容 $.colorbox({html:」 <p>Hello </p>」});
photo	false	若是爲true,將會以photo的方式加載內容 當照片自動檢測失敗時才須要使用這個參數，(如href是」photo.php」而不是」photo.jpg」,自動檢測就會失敗)
ajax		—blog主也沒翻譯過來，自行腦補吧—

(5)一些callback函數定義

參數	默認值	做用
onOpen	false	當彈出框要即將要open的時候觸發
onLoad	false	當彈出框在load內容的時候觸發
onComplete	false	當彈出內容加載完畢的時候觸發
onCleanup	false	當彈出框要即將要close的時候觸發
onClosed	false	當彈出框close以後的時候觸發

能夠用如下代碼嘗試一些加載的事件

$ ( ".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的參數，具體查看官網。

六、color box的方法

參數	做用
next()	翻開Next的內容
prev()	翻開prev的內容
close()	關閉彈出框
element()	獲取當前的html element
resize()	從新加載彈出框的長寬高
remove()	去掉當前元素的colorbox事件

p.s
本文已經同步至個人我的博客站點：
jquery插件（三）：Colorbox–內容播放插件(http://ifxoxo.com/jquery-colorbox.html)

若是想要看實例，能夠到如下網址查看：
http://520xmn.com