博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery弹出窗口小插件ColorBox
阅读量:6569 次
发布时间:2019-06-24

本文共 2259 字,大约阅读时间需要 7 分钟。

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

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

Fade Transition

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

No Transition + fixed width and height (75% of screen size)

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

Slideshow

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

Other Content Types

Outside HTML (Ajax)

Flash / Video (Iframe/Direct Link To YouTube)

Flash / Video (Iframe/Direct Link To Vimeo)

Outside Webpage (Iframe)

Inline HTML

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

Retina

Non-Retina

This content comes from a hidden element on this page.

The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.

Click me, it will be preserved!

If you try to open a new Colorbox while it is already open, it will update itself with the new content.

Updating Content Example:

Click here to load new content

 

转载地址:http://oqpjo.baihongyu.com/

你可能感兴趣的文章
Linux下修改Mysql的用户(root)的密码
查看>>
Reactjs 的 PropTypes 使用方法
查看>>
linux开机流程
查看>>
【转载】反向代理为何叫反向代理?
查看>>
Windows 7环境下安装PHP 5.2.17
查看>>
mount(挂载)
查看>>
使用swoole编写简单的echo服务器
查看>>
深入了解java线程池
查看>>
API接口自动化之2 处理http请求的返回体,对返回体做校验
查看>>
六种方法实现CSS三栏布局
查看>>
AIO-3128C四核高性能主板
查看>>
代码文件的编码不统一导致的坑
查看>>
20145240《信息安全系统设计基础》第十二周学习总结
查看>>
物理机_双机调试_资料
查看>>
slice,substr和substring的区别
查看>>
C#Arcengine通过坐标点生成面(环形)
查看>>
7.08 计算累计差
查看>>
MongoDB 基本操作增删改查
查看>>
关于github failed to push some refs
查看>>
Compiling: main.cpp /bin/sh: g++: not found
查看>>