wap网站html5,国外做油画的网站,重庆做seo外包的,小波app推广网第一、简介第二、上个简单的例子第三、基本使用 3.1单张图片3.2组相册图片3.3 弹出效果3.4 显示html 1.以独立html文件格式组织2.以内部html元素组织3.网页iframe4.直接写html元素 3.5回调函数 第四、属性配置 1.基本属性2.Content Type3.Dimensions4.Slideshow5.位置6.元素上的… 第一、简介第二、上个简单的例子第三、基本使用 3.1单张图片3.2组相册图片3.3 弹出效果3.4 显示html 1.以独立html文件格式组织2.以内部html元素组织3.网页iframe4.直接写html元素 3.5回调函数 第四、属性配置 1.基本属性2.Content Type3.Dimensions4.Slideshow5.位置6.元素上的回调函数7.公共方法8.公共事件 第五。总结 第一、简介
ColorBox可以播放单张图片组图片视频打开新html内嵌iframe甚至html标签等注意它是弹出层插件不是用于基本页面展示的。而且一次只能弹出一个新弹框复用以前的弹框弹出层再弹出层是没有的。 官方的例子提供了5种风格样式引入不同的css页面展示不同的效果。ColorBox有丰富的参数配置及其简单的调用方法。 这些配置以及js文件,5种风格样式css都可以在源码里拿到其中jquery不要求版本当然最好是最新的。 官网 gitHub上源码 效果展示 第二、上个简单的例子
!DOCTYPE html
htmlheadmeta charsetutf-8/titleColorbox Examples/titlelink relstylesheet hrefcolorbox.css /script typetext/javascript src../jquery-1.9.1.min.js/scriptscript typetext/javascript src../jquery.colorbox.js/scriptscript typetext/javascript$(document).ready(function(){$(#single).colorbox({transition: fade});});/script/headbodya classgroup1 idsingle href../content/ohoopee1.jpg title展示Grouped Photo 11/a /body
/html
前面的引入js和css文件就不必说了下面有详细介绍我们关注的是a超链接指定的超链接的弹出图片然后在script脚本文件里使用colorbox插件初始化一下$(#single).colorbox({transition: fade});即可使用插件的效果弹出图片了是不是很简单。 第三、基本使用
引入2个js文件jquery.colorbox.js和jquery.js。当然生成环境要使用压缩版的jquery.colorbox.min.js和jquery.min.js 引入1个css文件colorbox.css注意引入不同皮肤的css文件将实现不同的皮肤。5种风格样式在源码例子里。
link relstylesheet hrefcolorbox.css /
script typetext/javascript src../jquery-1.9.1.min.js/script
script typetext/javascript src../jquery.colorbox.js/script
使用语法
$(selector).colorbox({key:value, key:value, key:value});
3.1单张图片
单张图片直接使用colorbox()方法即可也可使用些参数如下
script typetext/javascript$(document).ready(function(){//Examples of how to assign the Colorbox event to elements//$(.group1).colorbox({rel:group1});$(#single).colorbox({transition: fade});});
/script
bodya classgroup1 idsingle href../content/ohoopee1.jpg title展示Grouped Photo 11/a
/body
3.2组相册图片
使用colorbox的rel参数可以图片作为colorbox的相册。rel指定的对象class即可做为相册图片。
$(.group1).colorbox({rel: group1});
3.3 弹出效果
图片弹出的效果设置colorbox方法的参数 1.Fade Transition淡入淡出
$(.group2).colorbox({rel: group2, transition: fade});
2.滑动效果
$(.group4).colorbox({rel: group4, slideshow: true});
3.无效果指定弹出图片宽高 无过渡效果并且固定宽高75%的显示屏尺寸
$(.group3).colorbox({rel: group3, transition: none, width: 75%, height: 75%});
3.4 显示html
1.以独立html文件格式组织
比如testOutHtml.html
div idhomer stylebackground:url(../content/homer.jpg) right center no-repeat #ececec; height:135px; width:280px; padding:30px 10px;strongHomer/strongbr/em\noun\/embr/strong1./strong American boneheadbr/strong2. Pull a Homer-/strongbr/to succeed despitebr/idiocy
/div
script$(#homer strong).css({color:red});
/script
使用colorBox调用方式如下
$(.testOutHtml).colorbox();
pa classtestOutHtml hreftestOutHtml.html titleHomer Defined外部html/a/p
2.以内部html元素组织
比如html里有如下html元素
div styledisplay:nonediv idinline_content stylepadding:10px; background:#fff;pstrongThis content comes from a hidden element on this page./strong/ppThe inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed./ppa idclick href# stylepadding:5px; background:#ccc;Click me, it will be preserved!/a/ppstrongIf you try to open a new Colorbox while it is already open, it will update itself with the new content./strong/ppUpdating Content Example:br /a classajax href../content/ajax.htmlClick here to load new content/a/p/div
/div
调用方式如下
$(.inline).colorbox({inline:true, width:50%});
//指定具体宽度$(.inline).colorbox({inline:true, innerWidth:640, innerHeight:390});
pa classinline href#inline_contentInline HTML/a/p
3.网页iframe
$(.iframe).colorbox({iframe:true, width:80%, height:80%});
pa classiframe hrefhttp://www.baidu.com网页iframe/a/p4.直接写html元素
$(#single).colorbox({html:h3Welcome/h3});
//$.colorbox({html:h3Welcome/h3});//直接使用公开方法$.colorbox3.5回调函数
$(.callbacksA).colorbox({onOpen:function(){ alert(onOpen: colorbox is about to open); },onLoad:function(){ alert(onLoad: colorbox has started to load the targeted content); },onComplete:function(){ alert(onComplete: colorbox has displayed the loaded content); },onCleanup:function(){ alert(onCleanup: colorbox has begun the close process); },onClosed:function(){ alert(onClosed: colorbox has completely closed); }
});
a classcallbacksA href../content/marylou.jpg title测试回调函数测试回调函数/a.
第四、属性配置
下面介绍属性配置更详细的可去官文上看。
1.基本属性
属性默认值描述transitionelastic过渡型。可以设置为“elastic”“fade”或“none”。speed350效果切换速度以毫秒为单位。hreffalse这可以被用来作为一种替代锚URL或联想到的URL非锚的元素如图片或表格按钮。$“H1”.colorbox的HREF{ }”的民族性与地域性”titlefalse这可以作为一个锚定的方式。relfalse这可以作为一个锚REL的替代方式。这允许用户在一个画廊集团任何元素的组合或改变现有的关系所以元素不归。scalePhotostrue如果是真的如果最大最大高度innerwidthinnerheight宽度或高度已经确定ColorBox会规模的照片符合这些价值观。scrollingtrue如果为falseColorBox将隐藏溢出内容滚动条。这可以用于与调整相结合的方法见下文为一个平稳的过渡如果你添加内容到方式已经打开的一个实例。opacity0.85叠加的不透明度。范围0到1。openfalse如果属实将立即打开方式。looptrue如果为假将禁用环回组开始时的最后一个元素的能力。arrowKeytrue如果为假将禁用左、右方向键从组中的项目之间导航。escKeytrue如果为假将禁用“ESC”键关闭方式fadeOut300毫秒淡出速度集当关闭方式。closeButtontrue设置为false将关闭按钮。 2.Content Type
属性默认值描述iframefalse如果是真的指定的内容应在iframe中显示。如果是真的从当前文档的内容可以通过href属性jQuery选择器显示jQuery对象inlinefalse使用A /选择器$“#内联”.colorbox{内嵌链接威胁“# myform”}htmlFor displaying a string of HTML or text: $.colorbox({html:”Hello”}); 3.Dimensions
属性默认值描述width设定一个固定的总宽度。这包括边框和按钮。例如“100%”、“500px”或500height设定一个固定的总高度。这包括边框和按钮。例如“100%”、“500px”或500innerWidth这是一个替代“宽度”用来设置一个固定的内部宽度。这不包括边框和按钮。例如“50%”、“500px”或500innerHeight这是另一种“高度”用来设置一个固定的内部高度。这不包括边框和按钮。例如“50%”、“500px”或500initialWidth300设置初始宽度正在加载任何内容之前。initialHeight100设置初始高度正在加载任何内容之前。maxWidth设置内容的最大宽度。例如“100%”500“500px”maxHeight设置内容的最大高度。例如“100%”500“500px” 4.Slideshow
属性默认值描述slideshowfalse如果是真的增加了一个自动的幻灯片内容组/画廊。slideshowSpeed2500设置幻灯片的速度以毫秒为单位。slideshowAutotrue如果是真的幻灯片将自动开始播放。slideshowStart“start slideshow”为幻灯片开始按钮文字。slideshowStop“stop slideshow”停止自动滑动按钮的文本 5.位置
属性默认值描述fixedfalse如果是真的颜色框将显示在一个固定的位置在游客的视口。这是不同于默认的绝对定位相对于文档。topfalse接受一个像素或百分比值50“50px”、“10%”。而不是使用被集中在视口的默认位置控制方式的垂直定位。bottomfalse接受一个像素或百分比值50“50px”、“10%”。而不是使用被集中在视口的默认位置控制方式的垂直定位。leftfalse接受一个像素或百分比值50“50px”、“10%”。控制方式的水平定位而不是使用被集中在视口的默认位置。rightfalse接受一个像素或百分比值50“50px”、“10%”。控制方式的水平定位而不是使用被集中在视口的默认位置。repositiontrue复位方式如果窗口的Resize事件触发。 6.元素上的回调函数
属性描述onOpen弹出层刚打开前onLoad在试图加载目标内容前onComplete目标内容加载完成onCleanup在关闭ueonClosed关闭触发
使用方法在绑定的元素上操作
$(.callbacks).colorbox({onOpen:function(){ alert(onOpen: colorbox is about to open); },onLoad:function(){ alert(onLoad: colorbox has started to load the targeted content); },onComplete:function(){ alert(onComplete: colorbox has displayed the loaded content); },onCleanup:function(){ alert(onCleanup: colorbox has begun the close process); },onClosed:function(){ alert(onClosed: colorbox has completely closed); }});
7.公共方法
属性描述$.colorbox()可以在不绑定到某个元素的情况下直接调用如$.colorbox({href:’../content/ajax.html’});但注意测试必需在tomcat等服务器上测试本地测试会报“Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.”错误即不支付使用“file://…方式加载网页”$.colorbox.next(), $.colorbox.prev()相当于下一页上一页功能$.colorbox.element()获取前的HTML元素。返回一个包含元素的jQuery对象。var element e l e m e n t element = .colorbox.element();$.colorbox.resize()重新渲染$.colorbox.remove()删除colorbox的痕迹不同于$.colorbox.close(}
使用方法直接调用
8.公共事件
属性描述cbox_open目标对象刚打开前cbox_load目标对象刚加载cbox_complete目标对象已经渲染完成cbox_cleanupclose方法调用之前cbox_closedclose方法调用之后
使用方法
$(document).bind(cbox_complete, function(){setTimeout($.colorbox.next, 1500);
});
第五。总结
引入正确的js和css文件定位好元素属性使用colorBox初始化即可。这里要注意有些成熟的框架引入了colorbox弹出层它会对colorbox样式做修改如果你引入colorbox到某个成熟的大框架发现弹出和效果和例子效果不一样多半是框架修改了colorbox.css样式。
