• 支持 照片，照片組，幻燈片，ajax，內(nèi)聯(lián) 和 iframe 框架。
• 通過CSS 控制外觀，使用用戶可以很容易重新定制外觀。
• 不需要更改 ColorBox 的 javascript 文件就可以重新設(shè)定其行為。
• 可以依靠 callback & event-hooks 進(jìn)行拓展，不需要修改源代碼。
• 非常友好，不需要修改現(xiàn)有的 HTML，所有的選項(xiàng)都通過 JS 設(shè)置。

?

介紹

colorbox()函數(shù)使用一堆key/value對(duì)象和一個(gè)可選的callback函數(shù)

格式：$('selector').colorbox({key:value}, callback);

例子： $('a.gallery').colorbox({transition:'fade', speed:500});

還是例子：$('button').colorbox({href:"thankyou.html"});

?

?

設(shè)置的值

?

默認(rèn)值

?

介紹

transition	"elastic"	過渡效果，可以是"elastic", "fade", or "none".
speed	350	設(shè)置過渡效果的持續(xù)時(shí)間，毫秒
href	false	Example:$('h1').colorbox({href:"welcome.html"}) 這個(gè)用來設(shè)置一個(gè)錨標(biāo)記的值或者一個(gè)不是錨的元素，例如圖像或者表單的按鈕，例如：
title	false	這可以為Colorbox設(shè)置一個(gè)標(biāo)題
rel	false	Example:$('#example a').colorbox({rel:'group1'}) 這個(gè)可以根據(jù)元素的rel屬性設(shè)置要顯示的元素集合，也可以覆蓋一個(gè)存在的rel屬性
width	false	Example: "100%", "500px", or 500 設(shè)置寬度，包括邊框和按鈕
height	false	?Example: "100%", "500px", or 500 設(shè)置高度，包括邊框和按鈕
innerWidth	false	Example: "50%", "500px", or 500 這個(gè)可以設(shè)定一個(gè)固定的內(nèi)大小，包括邊框和按鈕
innerHeight	false	Example: "50%", "500px", or 500 這個(gè)可以設(shè)定一個(gè)固定的內(nèi)高度，包括邊框和按鈕
initialWidth	300	設(shè)置初始化寬度
initialHeight	100	設(shè)置初始化高度
maxWidth	false	?Example: "100%", 500, "500px" 設(shè)置內(nèi)容的最大寬度
maxHeight	false	Example: "100%", 500, "500px" 設(shè)置內(nèi)容的最大高度
scalePhotos	true	如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被設(shè)置， Colorbox會(huì)縮放圖片以使用邊框
scrolling	true	如果是false,Colorbox不會(huì)為了溢出元素設(shè)置滾動(dòng)條
iframe	false	如果是true，元素會(huì)在Iframe中顯示
inline	false	Example: $("#inline").colorbox({inline:true, href:"#myForm"}); 如果是true,jQuery選擇器可以用來選擇要顯示的元素。例如：
html	false	Example: $.fn.colorbox({html:' Hello '}); 這個(gè)是直接讓你顯示HTML代碼，例
photo	false	如果為true，ColorBox只會(huì)把元素按照?qǐng)D片顯示，防止類似photo.php?pic=1這樣的連接被誤認(rèn)為是網(wǎng)頁(yè)
opacity	0.85	遮罩層不透明度 從0-1之間取值
open	false	如果為true,ColorBox會(huì)自動(dòng)開啟
preloading	true	如果為True,ColorBox會(huì)自動(dòng)預(yù)載要顯示圖片
overlayClose	true	為true單擊遮罩層就可以把ColorBox關(guān)閉
slideshow	false	為True，會(huì)自動(dòng)滾動(dòng)圖片
slideshowSpeed	2500	設(shè)置時(shí)間，毫秒
slideshowAuto	true	為tuue，滑動(dòng)會(huì)自動(dòng)開始
slideshowStart	"start slideshow"	開始自動(dòng)滑動(dòng)按鈕的文本
slideshowStop	"stop slideshow"	停止自動(dòng)滑動(dòng)按鈕的文本
current	"{current} of {total}"	文本內(nèi)容：現(xiàn)在正在顯示的元素序號(hào)
previous	"previous"	“上一個(gè)”按鈕的文本
next	"next"	“下一個(gè)”按鈕的文本
close	"close"	“關(guān)閉”按鈕的文本

Jquery ColorBox使用

1,flash覆蓋colorbox:

2,colorbox在ie中的位置和行為異常:

3,colorbox的位置和行為異常（不區(qū)分瀏覽器）:

4,用colorbox顯示外部文檔時(shí)顯示不正確:

5,在ie中colorbox的邊框不顯示:

6,嘗試載入外部頁(yè)面卻獲得”Request unsuccessful”的報(bào)錯(cuò)信息

7,如何通過rel屬性關(guān)閉colorbox的群組功能

8,JavaScript/jQuery 在colorbox中不工作

9,在iframe外面打開colorbox

??

colorbox常見問題

http://wxinpeng.javaeye.com/blog/737230

?

?

• 支持 照片，照片組，幻燈片，ajax，內(nèi)聯(lián) 和 iframe 框架。
• 通過CSS 控制外觀，使用用戶可以很容易重新定制外觀。
• 不需要更改 ColorBox 的 javascript 文件就可以重新設(shè)定其行為。
• 可以依靠 callback & event-hooks 進(jìn)行拓展，不需要修改源代碼。
• 非常友好，不需要修改現(xiàn)有的 HTML，所有的選項(xiàng)都通過 JS 設(shè)置。

  ?

  介紹

  colorbox()函數(shù)使用一堆key/value對(duì)象和一個(gè)可選的callback函數(shù)

  格式：$('selector').colorbox({key:value}, callback);

  例子： $('a.gallery').colorbox({transition:'fade', speed:500});

  還是例子：$('button').colorbox({href:"thankyou.html"});

  ?

  ?

  設(shè)置的值

  ?

  默認(rèn)值

  ?

  介紹

  transition

  "elastic"

  過渡效果，可以是"elastic", "fade", or "none".

  speed

  350

  設(shè)置過渡效果的持續(xù)時(shí)間，毫秒

  hreffalse

  Example:$('h1').colorbox({href:"welcome.html"})

  這個(gè)用來設(shè)置一個(gè)錨標(biāo)記的值或者一個(gè)不是錨的元素，例如圖像或者表單的按鈕，例如：

  titlefalse

  這可以為Colorbox設(shè)置一個(gè)標(biāo)題

  relfalse

  Example:$('#example a').colorbox({rel:'group1'})

  這個(gè)可以根據(jù)元素的rel屬性設(shè)置要顯示的元素集合，也可以覆蓋一個(gè)存在的rel屬性

  widthfalse

  Example: "100%", "500px", or 500

  設(shè)置寬度，包括邊框和按鈕

  heightfalse

  ?Example: "100%", "500px", or 500

  設(shè)置高度，包括邊框和按鈕

  innerWidthfalse

  Example: "50%", "500px", or 500

  這個(gè)可以設(shè)定一個(gè)固定的內(nèi)大小，包括邊框和按鈕

  innerHeightfalse

  Example: "50%", "500px", or 500

  這個(gè)可以設(shè)定一個(gè)固定的內(nèi)高度，包括邊框和按鈕

  initialWidth300

  設(shè)置初始化寬度

  initialHeight100

  設(shè)置初始化高度

  maxWidthfalse

  ?Example: "100%", 500, "500px"

  設(shè)置內(nèi)容的最大寬度

  maxHeightfalse

  Example: "100%", 500, "500px"

  設(shè)置內(nèi)容的最大高度

  scalePhotostrue

  如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被設(shè)置，

  Colorbox會(huì)縮放圖片以使用邊框

  scrollingtrue

  如果是false,Colorbox不會(huì)為了溢出元素設(shè)置滾動(dòng)條

  iframefalse

  如果是true，元素會(huì)在Iframe中顯示

  inlinefalse

  Example:?$("#inline").colorbox({inline:true, href:"#myForm"});

  如果是true,jQuery選擇器可以用來選擇要顯示的元素。例如：

  htmlfalse

  Example:?
  $.fn.colorbox({html:'

  這個(gè)是直接讓你顯示HTML代碼，例

  ?

  Hello

  '});photofalse

  如果為true，ColorBox只會(huì)把元素按照?qǐng)D片顯示，防止類似photo.php?pic=1這樣的連接被誤認(rèn)為是網(wǎng)頁(yè)

  opacity0.85

  遮罩層不透明度 從0-1之間取值

  openfalse

  如果為true,ColorBox會(huì)自動(dòng)開啟

  preloadingtrue

  如果為True,ColorBox會(huì)自動(dòng)預(yù)載要顯示圖片

  overlayClosetrue

  為true單擊遮罩層就可以把ColorBox關(guān)閉

  slideshowfalse

  為True，會(huì)自動(dòng)滾動(dòng)圖片

  slideshowSpeed2500

  設(shè)置時(shí)間，毫秒

  slideshowAutotrue

  為tuue，滑動(dòng)會(huì)自動(dòng)開始

  slideshowStart"start slideshow"

  開始自動(dòng)滑動(dòng)按鈕的文本

  slideshowStop"stop slideshow"

  停止自動(dòng)滑動(dòng)按鈕的文本

  current"{current} of {total}"

  文本內(nèi)容：現(xiàn)在正在顯示的元素序號(hào)

  previous"previous"

  “上一個(gè)”按鈕的文本

  next"next"

  “下一個(gè)”按鈕的文本

  close"close"

  “關(guān)閉”按鈕的文本

總結(jié)

以上是生活随笔為你收集整理的jQuery的弹出窗口插件colorbox的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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