ColorBox是一个基于 jQuery 的轻量级,自定义灯箱插件,功能非常强大,支持图片,图片组,ajax,inline和iframed内容,灯箱样式完全由用户控制,可自定义CSS样 式,不需要改写ColorBox库文件就能重写展示效果设置,支持加载预处理提示等等,效果图如下:
在线演示:http://runjs.cn/detail/hjor2zox
使用说明
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"
transitionSpeed 350 表示灯箱过渡效果展示的速度
initialWidth 300 表示灯箱初始化宽度
initialHeight 100 表示灯箱初始化高度
contentWidth false 表示是否设置一个固定的宽度
contentHeight false 表示是否设置一个固定的高度
contentAjax false 表示是否是一个ajax加载
contentInline false 表示是否是一个inline
contentIframe false 表示是否是一个iframe
bgOpacity 0.85 表示灯箱的背景透明度
preloading true 表示是否预加载
contentCurrent '{current} of {total}' 表示灯箱展示的当前图片和总数
contentPrevious 'previous' 表示上一个锚,类似于rel属性
contentNext 'next' 表示下一个锚,类似于rel属性
modalClose 'close' 锚文本关闭链接,可选Esc或close
jQuery插件ColorBox彩盒使用非常简单,可实现功能非常多,如弹出新窗口,弹出图片,弹出框架等等,值得推荐。
介绍内容来自 http://www.biuuu.com/
官方网站:http://colorpowered.com/colorbox/ 支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架。 通过CSS 控制外观,使用用户可以很容易重新定制外观。 不需要更改 ColorBox 的 javascript 文件就可以重新设定其行为。 可以依靠 callback & event-hooks 进行拓展,不需要修改源代码。 非常友好,不需要修改现
Colorbox 常用属性 设置的值 默认值 介绍 transition elastic 过渡效果fade or none or elastic speed 350
jquery弹出层插件推荐jquery.ColorBox有5种风格,丰富的参数配置,及其简单的调用配置,支持单张图片展示,图片组展示,html片段展示,支持框架Iframe弹出层,支持jquery弹出层ajax方式加载。 jquery弹出层插件jquery.ColorBox 5种风格演示地址: http://www.jacklmoore.com/colorbox/example1/ http://
第一、简介 ColorBox可以播放单张图片,组图片,视频,打开新html,内嵌iframe,甚至html标签等,注意它是弹出层插件,不是用于基本页面展示的。而且一次只能弹出一个,新弹框复用以前的弹框,弹出层再弹出层是没有的。 官方的例子提供了5种风格样式,引入不同的css页面展示不同的效果。ColorBox有丰富的参数配置,及其简单的调用方法。 这些配置以及js文件,5种风格样式css都可以在源
昨天给大家介绍了一款功能很强大的jquery图片播放插件Fancybox,今天虽然比较晚了,但笔者依然有冲动要继续给大家介绍一款好用的jquery图片播放插件ColorBox,希望对大家平时的Web编程有所帮助。 ColorBox插件的项目主页地址:http://colorpowered.com/colorbox/ 最新版本ColorBox插件下载地址:http://colorpowered.co
ColorBox官方网站:http://colorpowered.com/colorbox/ colorbox()函数使用一堆key/value对象和一个可选的callback函数 格式:$('selector').colorbox({key:value}, callback); 例子: $('a.gallery').colorbox({transiti
1、需要的js (1)jquery (2)colorbox (http://www.jacklmoore.com/colorbox/ 下载文件夹,其中有js、css文件) //加载的时候注意文件的路径 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jq
使用实例如下: 一,使用ColorBox灯箱显示一张图片和图片组 (1)js部分 $.fn.colorbox.settings.transition = "fade"; $.fn.colorbox.settings.bgOpacity = "0.9"; $.fn.colorbox.settings.contentCurrent = "image {current} of {total}"; $
一、Colorbox插件介绍 ColorBox是一个基于jQuery 1.3 的轻量级,在压缩后只有10K的大小,自定义灯箱插件,功能非常强大,支持图片,图片组,ajax,inline和iframed内容,灯箱样式完全由用户控制,可自定义CSS样 式,不需要改写ColorBox库文件就能重写展示效果设置,支持加载预处理提示等等。 Colorbox项目的主页地址是:http://www.jacklm
一. 什么是 Colorbox ? Jquery的一个轻量的,可自定义的 lightbox 插件。 二. 为什么选择Colorbox? 支持图片,图片组,图片滑动观看,ajax,行内元素和iframe内容 十分轻量,只有不到9KB大小 外观可以通过CSS进行控制 可以直接覆盖ColorBox的行为设置而不用改ColorBox的JS文件 可以直接加上回调函数和事件钩子而不用更改它的源代码 非入侵式
https://cdn.bootcdn.net/ajax/libs/jquery.colorbox/1.6.4/i18n/jquery.colorbox-ar.js https://cdn.bootcdn.net/ajax/libs/jquery.colorbox/1.6.4/i18n/jquery.colorbox-bg.js https://cdn.bootcdn.net/ajax/libs/
jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦。 jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax加载html,iframe等等,最主要的是它还可以写回调函数 效果演示地址: 1、http://www.phpddt.com/demo/colorbox/example1/ 2、http://www.
继承自 NativeObject 所有弹出式UI元素(pop-ups)的基类。弹出式UI元素比所有其他UI的层级都高,但不属于控件。某些弹出式UI只能弹出一次。 通过 “const {Popup} = require('tabris');” 引入该类 方法 close() 返回值: this 隐藏弹出窗。 open() 返回值: this 显示弹出窗。
问题内容: 我想使用Firefox浏览器,使用RSelenium从网站下载文件。我正确地完成了所有操作(导航,选择正确的元素并写下我想要的内容);现在,我单击“下载”按钮,然后打开一个Firefox弹出窗口,并询问我是否要下载文件或“用…打开”。 不幸的是,由于隐私限制,我无法编写示例。 我的问题是:如何在需要时切换到弹出窗口/警报并单击“确定”? 我尝试了以下方法,但均未成功: 我也试过了 但是
Popup 是一种可以包含任何Html内容的弹出窗口,从App的主内容区域上弹出。 Popup 和其他所有的遮罩图层一样,是所谓的“临时视图”的一部分。 Popup 布局 Popup 布局相当简单. 你所需要做的就是将放到 body 里正确的位置上: <div class="modal modal-no-buttons"> ... <div class="popup"> An
问题内容: 因此,我一直在用Qt为我的Python应用程序创建GUI。我现在遇到的情况是,按下按钮后,将执行适当的推迟操作,我们执行一些任务,然后需要打开一个单独的窗口,其中包含一两个东西。但是我似乎无法弄清楚如何创建这个新的单独窗口。谁能给我一个如何创建一个例子吗? 问题答案: 一个使您抓狂的常见错误是忘记将创建的弹出窗口的句柄存储在将保持活动状态的python变量中(例如,存储在主窗口的数据成
问题内容: 我已经开始了angularjs项目,我想实现fancybox。 为此,我在解决方案中包含了jQuery和fancybox插件。我试图在下面的fancybox窗口中显示的代码中打开模板。 视图 控制者 还有 popup / add.html Fancybox成功打开了一个包含模板的窗口,但是该表达式尚未求值。谁能帮忙吗? 问题答案: 我已经为fancybox创建了指令
E/AndroidRuntime:致命异常:main process:com.luteraa.luteraaesports,pid:6355 java.lang.nullpointerException:试图在com.luteraa.luteraaesports.bgmicategoryAdapter.OpenDialog(bgmicategoryAdapter.java.access$000(b
问题内容: 有人可以建议我如何在Java Swing中实现弹出窗口。我希望弹出窗口是模式窗口(打开弹出窗口时用户无法返回主窗口)。 我尝试使用JDialog进行操作,但是它只允许一个小部件供用户输入,而我需要多个小部件。我在这里可能是错的,但这就是我能够做到的。 感谢你的帮助。 问题答案: 使用一个JDialog。可以添加的内容没有限制,可以将所需的内容添加到JDialog中(与使用JFrame时
所以我正在c#winform中使用硒火狐web驱动程序,我在下面有这段代码来获取弹出窗口的句柄,当您单击“webtraffic_popup_start_button”时显示,它应该获得弹出窗口的句柄,但弹出句柄与当前句柄相同。 任何帮助将不胜感激 这就是弹出式菜单的样子。