lightbox使用
使用方法:
1、在页面头部包含 lightbox.js 文件并加载 lightbox.css 样式表文件
1 <script type="text/javascript" src="js/jquery.js"></script> 2 <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> 3 <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css">
2,调用实例化灯箱
$('#gallery a').lightBox(); $('a.lightbox').lightBox(); $('a').lightBox();
3,扩展:
jQuery lightBox插件配置
在该配置中,您可以定制您的jQuery lightBox插件 。
1 <script type="text/javascript"> 2 $(function() { 3 $('#gallery a').lightBox({ 4 overlayBgColor:"#fff",//设置显示背景 5 fixedNavigation:false,//是否显示下一页跟上一页的标签 6 //imageLoading:'images/lightbox-ico-loading.gif',//设置下载图片 7 //imageBtnPrev:'images/lightbox-btn-prev.gif',//设置上一页按钮的图片地址 8 //imageBtnNext:'images/lightbox-btn-next.gif',//设置下一页按钮的图片地址 9 //imageBtnClose:'images/lightbox-btn-close.gif',//设置关闭按钮的图片地址 10 //imageBlank:'images/lightbox-blank.gif',//设置空白的图片地址 11 containerBorderSize:10,//设置显示图片边框的宽度 12 containerResizeSpeed:2000,//设置显示图片的时间 13 txtImage:"图片:",//定义介绍的文字 14 txtOf:"/",//定义页数中间的字符 15 keyToClose:"s",//设置关闭图片的快捷键 16 keyToPrev:"a",//设置上一页的快捷键 17 keyToNext:"d",//设置下一页的快捷键 18 //imageArray:"", 19 activeImage:0,//设置动态显示图片,要用到easing插件 20 easing:"easeOutElastic", 21 overlayOpacity:0.7//设置背景的透明度 22 }); 23 }); 24 25 例子: 26 27 <script type="text/javascript"> 28 $(function() { 29 $('a[@rel*=lightbox]').lightBox({ 30 overlayBgColor: '#FFF', 31 overlayOpacity: 0.6, 32 imageLoading: 'http://example.com/images/loading.gif', 33 imageBtnClose: 'http://example.com/images/close.gif', 34 imageBtnPrev: 'http://example.com/images/prev.gif', 35 imageBtnNext: 'http://example.com/images/next.gif', 36 containerResizeSpeed: 350, 37 txtImage: 'Imagem', 38 txtOf: 'de' 39 }); 40 }); 41 </script>
lightbox下载地址和案例
转载于:https://www.cnblogs.com/suruozhong/p/6225436.html
lightbox使用相关推荐
- 推荐15款响应式的 jQuery Lightbox 插件
利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...
- 只用来保存JQuery lightbox图片用的
发现在cnblogs不能上传图片,所以得通过这个方法,上传JQuery插件LightBox所用到的图片 转载请注明出处[http://samlin.cnblogs.com/] 作者赞赏 当当计算书 ...
- 40种Lightbox效果收集
在设计网站的时候,可能会有一些特效,而下面的40种特效,都是很不错的,既可以增加你的网站的特点,又可以带来一些回头客,下面的一些效果是包容了所有内容的Lightbox效果(比如MilkBox和Ligh ...
- JavaScript 仿LightBox内容显示效果
近来要做一个LightBox的效果(也有的叫Windows关机效果),不过不用那么复杂,能显示一个内容框就行了. 这个效果很久以前就做过,无非就是一个覆盖全屏的层,加一个内容显示的层.不过showbo ...
- jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
- 分享30个最佳 jQuery Lightbox 效果插件
您可能还喜欢 60款很酷的 jQuery 幻灯片演示和下载 Web开发者必备的20款超赞jQuery插件 提升你网站水平的 jQuery 插件推荐 12个很棒的学习 jQuery 的网站推荐 分享27 ...
- ImageLightbox.js – 响应式的图片 Lightbox 插件
ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...
- 使用Lightbox制作照片条
前言:这是国外的一个教程,我也很喜欢这个网页里面的教程,主要技术是CSS3和JQuery以及一些JQuery的插件的应用,当然从这些教程我也学到了他们制作时的一些思路,就好像做数学题那样,只要思路把握 ...
- 基于 jQuery支持移动触摸设备的Lightbox插件
Swipebox是一款支持桌面.移动触摸手机和平板电脑的jquery Lightbox插件.该lightbox插件支持手机的触摸手势,支持桌面电脑的键盘导航,并且支持视频的播放. 在线预览 源码下 ...
- FancyBox - 经典的 jQuery Lightbox 插件
FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应 ...
最新文章
- 大数据测试之初识Hadoop2
- 三门科目分析信息系统项目管理师如何备考
- 2017西安交大ACM小学期 美妙音乐[差分KMP匹配]
- java applet socket_Java swing applet中使用的套接字
- bzoj 3388: [Usaco2004 Dec]Cow Ski Area雪场缆车(Tarjan)
- php替换图片_php实现图片上传并进行替换操作
- PyCharm代码区不能编辑的解决办法
- 秘籍之树上蹦迪--LCA
- java json序列化日期类型
- 读书笔记-采购与供应链管理(一个实践者的角度)
- Git 修改历史提交中的用户名和邮箱
- python登录二维码_python实现二维码扫码自动登录淘宝
- rvm、Ruby、gem、CocoaPods 的安装使用与卸载
- 【无标题】学习浩辰CAD软件的心得
- 前端console.log打印内容与后端请求返回数据不一致
- 使用Matlab将抖音视频转换成gif图片
- 消失的阅读量:你家公众号还能活多久?
- 另一个小程序 返回的支付结果如何得到_微信小程序商城的开发商家需要注意什么?...
- 四、基于HTTPS协议的12306抢票软件设计与实现--水平DNS并发查询分享
- 强化学习——day12 多臂老虎机问题MAB
热门文章
- 文本匹配、文本相似度模型之DSSM
- PCBA加工组装需要的设备有哪些呢?
- 学习笔记 Tianmao 篇 OkHttp 网络的使用
- 苹果x和xsmax有什么区别_苹果12和12pro有什么区别?参数对比拍照续航,哪个值得买?...
- flutter基础布局之 对话框Dialogs
- flask架设微信小程序服务器,苹果手机能正常访问,安卓不行(ssl的中间证书问题)
- 学科03:工程学重要模型
- word文档图片画红线_word文档怎么画线条
- KubeCon上海“行业客户云原生最佳实践日“成功举办,云原生在各行业落地生花...
- poj2096(概率dp)