?

使用實例如下：
一，使用ColorBox燈箱顯示一張圖片和圖片組
(1)js部分

$.fn.colorbox.settings.transition = "fade"; $.fn.colorbox.settings.bgOpacity = "0.9"; $.fn.colorbox.settings.contentCurrent = "image {current} of {total}"; $(".cpModal").colorbox(); ?

transition設(shè)置ColorBox燈箱的過渡效果，如上：fade
bgOpacity設(shè)置ColorBox燈箱的背景透明度，如上：0.9
contentCurrent設(shè)置ColorBox燈箱的當前圖片，如上：image {current} of {total}

(2)HTML部分

<p><a class="cpModal" href="marylou.jpg" >單張圖片</a></p> <p><a class="cpModal" href="biuuu1.jpg" >圖片組1</a></p> <p><a class="cpModal" href="biuuu2.jpg" >圖片組2</a></p> <p><a class="cpModal" href="biuuu3.jpg" >圖片組3</a></p> ?

二，使用ColorBox燈箱顯示ajax加載HTML頁面
(1)js部分

$("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"}); ?

contentWidth設(shè)置ColorBox燈箱的內(nèi)容寬度，如上：300px
contentHeight設(shè)置ColorBox燈箱的內(nèi)容高度，如上：195px

(2)HTML部分

<p><a id="ajax" href="ajax.html">Ajax HTML</a></p> ?
ajax.html表示加載的html頁面，

三，使用ColorBox燈箱顯示flash頁面效果
(1)js部分

$("#flash").colorbox({contentAjax:"flash.html"}); ?

(2)HTML部分

<p><a id="flash" href="http://www.youtube.com/watch?v=lBvaHZIrt0">Flash / Video</a></p> ?
四，使用ColorBox燈箱顯示Inline HTML效果
(1)js部分
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"}); ?
contentInline設(shè)置ColorBox燈箱的inline內(nèi)容

(2)HTML部分

<p><a id="inline" href="#">Inline HTML</a></p> <div style="display:none"> <div id="inline-content"> <div style="padding:10px"> <p>必優(yōu)博客</p> <p>www.biuuu.com</p> </div> </div> </div> ?
五，使用ColorBox燈箱顯示Iframed框架內(nèi)容效果
(1)js部分
$("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true}); ?

contentIframe設(shè)置ColorBox燈箱的內(nèi)容是否為框架

(2)HTML部分

<p><a id="google" href="http://www.google.com">Iframed內(nèi)容</a></p> ?

ColorBox燈箱配置如下：
transition?'elastic' 表示燈箱過渡效果，可選"elastic" or "fade"
transitionSpeed??? 350 表示燈箱過渡效果展示的速度
initialWidth??? 300 表示燈箱初始化寬度
initialHeight??? 100 表示燈箱初始化高度
contentWidth??? false 表示是否設(shè)置一個固定的寬度
contentHeight??? false 表示是否設(shè)置一個固定的高度
contentAjax??? false 表示是否是一個ajax加載
contentInline??? false 表示是否是一個inline
contentIframe??? false 表示是否是一個iframe
bgOpacity?0.85 表示燈箱的背景透明度
preloading??? true 表示是否預加載
contentCurrent??? '{current} of {total}' 表示燈箱展示的當前圖片和總數(shù)
contentPrevious??? 'previous' 表示上一個錨，類似于rel屬性
contentNext??? 'next'??? 表示下一個錨，類似于rel屬性
modalClose??? 'close' 錨文本關(guān)閉鏈接，可選Esc或close

jQuery插件ColorBox彩盒使用非常簡單，可實現(xiàn)功能非常多，如彈出新窗口，彈出圖片，彈出框架等等，值得推薦。

來自 http://www.biuuu.com/

總結(jié)

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

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