ColorBox官方网站:http://colorpowered.com/colorbox/ colorbox()函数使用一堆key/value对象和一个可选的callback函数 格式:$('selector').colorbox({key:value}, callback); 例子: $('a.gallery').colorbox({transition:'fade', speed:500}); 还是例子:$('button').colorbox({href:"thankyou.html"}); 支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架。 通过CSS 控制外观,使用用户可以很容易重新定制外观。 不需要更改 ColorBox 的 javascript 文件就可以重新设定其行为。 可以依靠 callback & event-hooks 进行拓展,不需要修改源代码。 非常友好,不需要修改现有的 HTML,所有的选项都通过 JS 设置。 现在我来说说我使用ColorBox的步骤吧:其实使用ColorBox很简单 1.当然,创建项目。这里就不多说了。 2.在需要使用ColorBox的地方引用ColorBox的JS文件和css样式文件。 ps:从官方下载ColorBox解压后得到colorbox文件夹,colorbox文件夹下包含了colorbox、content、demos、example1至example5等文件夹和文件。这里需要把colorbox文 件夹下的两个JS文件拷贝到项目中,example1至example5这几个文件夹中是ColorBox的皮肤文件,比如你喜欢example1文件夹下的皮肤,就将文件夹下的images文件和 colorbox.css样式表拷贝到项目中。在需要使用ColorBox的地方引用jquery.colorbox.js、colorbox.css;当然不能忘了JQuery的JS文件jquery.min.js(注意:jquery.min.js需放在jquery.colorbox.js的前面)。到此,我们的准备工作就做好了。 3. 添加
示例:
Colorbox Examples Colorbox Demonstration
Elastic Transition
Fade Transition
No Transition + fixed width and height (75% of screen size)
Slideshow
Other Content Types
Flash / Video (Iframe/Direct Link To YouTube)
Flash / Video (Iframe/Direct Link To Vimeo)
Demonstration of using callbacks
Example with alerts. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.
Retina Images