请问谁用过Colorbox啊？？

ColorBox是一个基于jQuery 1.3 的轻量级，自定义灯箱插件，功能非常强大，支持图片，图片组，ajax，inline和iframed内容，灯箱样式完全由用户控制，可自定义CSS样 式，不需要改写ColorBox库文件就能重写展示效果设置，支持加载预处理提示等等，效果图如下：

使用说明

1，jQuery 1.3库文件

2，colorbox 库文件

3，灯箱效果CSS样式文件

使用实例如下：

一，使用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设置ColorBox灯箱的过渡效果，如上：fade

bgOpacity设置ColorBox灯箱的背景透明度，如上：0.9

contentCurrent设置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设置ColorBox灯箱的内容宽度，如上：300px

contentHeight设置ColorBox灯箱的内容高度，如上：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设置ColorBox灯箱的inline内容

(2)HTML部分

<p><a id="inline" href="#">Inline HTML</a></p>

<div style="display:none">

<div id="inline-content">

<div style="padding:10px">

<p>必优博客</p>

<p>www.biuuu.com</p>

</div>

</div>

</div>

五，使用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"

transitionSpeed350 表示灯箱过渡效果展示的速度

initialWidth300 表示灯箱初始化宽度

initialHeight100 表示灯箱初始化高度

contentWidthfalse 表示是否设置一个固定的宽度

contentHeightfalse 表示是否设置一个固定的高度

contentAjaxfalse 表示是否是一个ajax加载

contentInlinefalse 表示是否是一个inline

contentIframefalse 表示是否是一个iframe

bgOpacity 0.85 表示灯箱的背景透明度

preloadingtrue 表示是否预加载

contentCurrent'{current} of {total}' 表示灯箱展示的当前图片和总数

contentPrevious'previous' 表示上一个锚，类似于rel属性

contentNext'next'表示下一个锚，类似于rel属性

modalClose'close' 锚文本关闭链接，可选Esc或close

jQuery插件ColorBox彩盒使用非常简单，可实现功能非常多，如d出新窗口，d出图片，d出框架等等，值得推荐。

软件主页： http://colorpowered.com/colorbox/

下载地址： http://colorpowered.com/colorbox/colorbox.zip

drupal有不少相册模块，所以要实现相册的效果，就有很多方案可以实现，但在具体功能和效果上会有一些差异，你可以尝试着找一个适合你需求的。下面介绍一种简单的办法，你可以参考一下，

条件：

Drupal7

Multi-upload File Field Widget模块

Multi-upload Image Field Widget模块

Colorbox模块

一些简单的css

实现：

开启上面提到的模块

创建一个内容类型，比如就叫“Image Gallery”

在这个内容类型里边创建一个图片字段

字段类型选择“Image",控件类型（widget type）选择"Multiupload"

"值的数量"设为“不限”

创建一些图片预设(admin/config/media/image-styles)，比如

相册缩略图(150px x 150px) -- 用在相册的列表页

相册全尺寸(1000px wide) -- 用来在点击缩略图的时候显示大图

来到这个内容类型的“管理显示”页面，设置image字段的显示

标签 = 隐藏

格式 = Colorbox（彩盒）

在colorbox的设置里边需要将"Content Image Style"设为“相册缩略图(150px x 150px) ”，"Colorbox Image Style" 设为“相册全尺寸”

你也可以根据需要调整其它选项

点“更新”

点“保存”

现在可以去创建相册的内容了，你也可以写一些css来控制图片的浮动和边距。

用views生成一个相册的列表，缩略图链接到具体内容。

jQuery Colorbox是WordPress的一个图片效果插件，它自带着11个效果主题让你自由选择，>>查看主题效果。

这个插件要与NextGEN Gallery相册插件结合使用，并在NextGEN Gallery的设置中设置没有效果。

当我们新写一篇日志或页面的时候，经常会生成缩略图并指向或链接到原始图片，当点击一个缩略图时，所有的图片都可以在显示在另一层上，所有指向一个图片或链接的图片可以给组织到一个相册中进行显示，并可以进行特效播放。私人照片可以通过CSS屏蔽，不让显示。

---