官方网站:http://colorpowered.com/colorbox/

  • 支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架。
  • 通过CSS 控制外观,使用用户可以很容易重新定制外观。
  • 不需要更改 ColorBox 的 javascript 文件就可以重新设定其行为。
  • 可以依靠 callback & event-hooks 进行拓展,不需要修改源代码。
  • 非常友好,不需要修改现有的 HTML,所有的选项都通过 JS 设置。

介绍

colorbox()函数使用一堆key/value对象和一个可选的callback函数

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

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

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

设置的值

默认值

介绍

transition

"elastic"

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

speed

350

设置过渡效果的持续时间,毫秒

href false

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

这个用来设置一个锚标记的值或者一个不是锚的元素,例如图像或者表单的按钮,例如:

title false

这可以为Colorbox设置一个标题

rel false

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

这个可以根据元素的rel属性设置要显示的元素集合,也可以覆盖一个存在的rel属性

width false

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

设置宽度,包括边框和按钮

height false

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

设置高度,包括边框和按钮

innerWidth false

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

这个可以设定一个固定的内大小,包括边框和按钮

innerHeight false

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

这个可以设定一个固定的内高度,包括边框和按钮

initialWidth 300

设置初始化宽度

initialHeight 100

设置初始化高度

maxWidth false

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

设置内容的最大宽度

maxHeight false

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

设置内容的最大高度

scalePhotos true

如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被设置,

Colorbox会缩放图片以使用边框

scrolling true

如果是false,Colorbox不会为了溢出元素设置滚动条

iframe false

如果是true,元素会在Iframe中显示

inline false

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

如果是true,jQuery选择器可以用来选择要显示的元素。例如:

html false

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

Hello

'});

这个是直接让你显示HTML代码,例

photo false

如果为true,ColorBox只会把元素按照图片显示,防止类似photo.php?pic=1这样的连接被误认为是网页

opacity 0.85

遮罩层不透明度 从0-1之间取值

open false

如果为true,ColorBox会自动开启

preloading true

如果为True,ColorBox会自动预载要显示图片

overlayClose true

为true单击遮罩层就可以把ColorBox关闭

slideshow false

为True,会自动滚动图片

slideshowSpeed 2500

设置时间,毫秒

slideshowAuto true

为tuue,滑动会自动开始

slideshowStart "start slideshow"

开始自动滑动按钮的文本

slideshowStop "stop slideshow"

停止自动滑动按钮的文本

current "{current} of {total}"

文本内容:现在正在显示的元素序号

previous "previous"

“上一个”按钮的文本

next "next"

“下一个”按钮的文本

close "close"

“关闭”按钮的文本

jQuery的弹出窗口插件colorbox的更多相关文章

  1. CSS3/jQuery自定义弹出窗口

    简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css   index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...

  2. 写了一个jquery的 弹出层插件。

    下载地址:http://pan.baidu.com/s/1eQ26CMm ps:ajax加载做的,要有环境才能正常运行哦! //这是一个以ajax加载显示弹出层插件  参数(option): widt ...

  3. FancyBox——jQuery弹出窗口插件

    最近工作项目中有用到这款插件,就查找了一下相关资料和用法,下面是一些基本的简单用法,比较容易掌握,有需要的小伙伴可以参考.:) FancyBox是一款基于jquery开发的类Lightbox插件.支持 ...

  4. jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

    在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

  5. PHPCMS系统使用的弹出窗口插件artDialog

    来源: http://aui.github.io/artDialog/doc/index.html  (官方) http://lab.seaning.com/ http://www.mb5u.com/ ...

  6. jQuery+css3弹出框插件

    先来看DEMO:https://codepen.io/jonechen/pen/regjGG 插件的开发很简单,运用了CSS3的动画效果,并且弹出框的内容可以自定义.插件的默认配置参数有三个: var ...

  7. jquery layer弹出层插件

    http://www.51xuediannao.com/js/jquery/jquery_layer/layer.html

  8. jQuery zxxbox弹出框插件(v3.0)

    插件地址: http://www.zhangxinxu.com/study/201009/jquery-zxxbox-v3-demo.html

  9. 自用的弹出窗口jquery插件

    现有网上的弹出窗口插件很多, 但发现在项目应用中总会有些功能不能适用, 最后只好自己写一个:插件主要参考了ymPrompt弹窗代码, ymPrompt是JS的弹窗,本插件相当于是ymPrompt的jq ...

随机推荐

  1. IOS基础——alloc、init和new方法

    alloc:分配内存. init:初始化. new:代替上面两个函数:分配内存,并且初始化. 注意: 1.在实际开发中很少会用到new,一般创建对象时我们一般是 [[className alloc]i ...

  2. Configuring Report Manager

     Steps to configure and get Reports in Report manager. 1. Enable getting Reports in Report Manager. ...

  3. Silverlight 使用IsolatedStorage新建XML文件,并且用LINQ查询XML

    代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-- ...

  4. jquery click & get value of attributes of a href

    http://stackoverflow.com/questions/6625667/jquery-click-get-value-of-attributes-of-a-href /* Add a l ...

  5. input实时监听(input oninput propertychange onpropertychange)

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...

  6. HTML5+CSS3前端开发资源整合

    HTML5+CSS3前端开发资源整合   推个广告 个人网站:http://www.51pansou.com HTML5视频下载:HTML5视频 HTML5源码下载:HTML5源码 meta相关: & ...

  7. highcharts与highstock实例

    highcharts实例代码 <head> <title>highcharts报表示例</title> <meta http-equiv="Cont ...

  8. 【Zend Studio】10.6.0版本设置默认字体

    1.打开Windows->Prefefences 2.找到General->Appearance->Colors and Fonts->Basic->Text Font- ...

  9. java-servlet-jsp

    =========================servletjavax.servlet    javax.servlet.http    javax.annotation    javax.ser ...

  10. SQL语句基础之 管理数据库,表 和 数据

    MySQL中的基本sql语句 MySQL中主要有三个大的对象,第一个是数据库,有了数据库后,我们才能在数据库里面建表,因为Mysql是关系数据库,它的数据都会以记录的形式存到表里,所以第二个是表,然后 ...