使用方法:

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使用相关推荐

  1. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  2. 只用来保存JQuery lightbox图片用的

    发现在cnblogs不能上传图片,所以得通过这个方法,上传JQuery插件LightBox所用到的图片 转载请注明出处[http://samlin.cnblogs.com/] 作者赞赏   当当计算书 ...

  3. 40种Lightbox效果收集

    在设计网站的时候,可能会有一些特效,而下面的40种特效,都是很不错的,既可以增加你的网站的特点,又可以带来一些回头客,下面的一些效果是包容了所有内容的Lightbox效果(比如MilkBox和Ligh ...

  4. JavaScript 仿LightBox内容显示效果

    近来要做一个LightBox的效果(也有的叫Windows关机效果),不过不用那么复杂,能显示一个内容框就行了. 这个效果很久以前就做过,无非就是一个覆盖全屏的层,加一个内容显示的层.不过showbo ...

  5. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

  6. 分享30个最佳 jQuery Lightbox 效果插件

    您可能还喜欢 60款很酷的 jQuery 幻灯片演示和下载 Web开发者必备的20款超赞jQuery插件 提升你网站水平的 jQuery 插件推荐 12个很棒的学习 jQuery 的网站推荐 分享27 ...

  7. ImageLightbox.js – 响应式的图片 Lightbox 插件

    ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...

  8. 使用Lightbox制作照片条

    前言:这是国外的一个教程,我也很喜欢这个网页里面的教程,主要技术是CSS3和JQuery以及一些JQuery的插件的应用,当然从这些教程我也学到了他们制作时的一些思路,就好像做数学题那样,只要思路把握 ...

  9. 基于 jQuery支持移动触摸设备的Lightbox插件

    Swipebox是一款支持桌面.移动触摸手机和平板电脑的jquery Lightbox插件.该lightbox插件支持手机的触摸手势,支持桌面电脑的键盘导航,并且支持视频的播放. 在线预览   源码下 ...

  10. FancyBox - 经典的 jQuery Lightbox 插件

    FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应 ...

最新文章

  1. 大数据测试之初识Hadoop2
  2. 三门科目分析信息系统项目管理师如何备考
  3. 2017西安交大ACM小学期 美妙音乐[差分KMP匹配]
  4. java applet socket_Java swing applet中使用的套接字
  5. bzoj 3388: [Usaco2004 Dec]Cow Ski Area雪场缆车(Tarjan)
  6. php替换图片_php实现图片上传并进行替换操作
  7. PyCharm代码区不能编辑的解决办法
  8. 秘籍之树上蹦迪--LCA
  9. java json序列化日期类型
  10. 读书笔记-采购与供应链管理(一个实践者的角度)
  11. Git 修改历史提交中的用户名和邮箱
  12. python登录二维码_python实现二维码扫码自动登录淘宝
  13. rvm、Ruby、gem、CocoaPods 的安装使用与卸载
  14. 【无标题】学习浩辰CAD软件的心得
  15. 前端console.log打印内容与后端请求返回数据不一致
  16. 使用Matlab将抖音视频转换成gif图片
  17. 消失的阅读量:你家公众号还能活多久?
  18. 另一个小程序 返回的支付结果如何得到_微信小程序商城的开发商家需要注意什么?...
  19. 四、基于HTTPS协议的12306抢票软件设计与实现--水平DNS并发查询分享
  20. 强化学习——day12 多臂老虎机问题MAB

热门文章

  1. 文本匹配、文本相似度模型之DSSM
  2. PCBA加工组装需要的设备有哪些呢?
  3. 学习笔记 Tianmao 篇 OkHttp 网络的使用
  4. 苹果x和xsmax有什么区别_苹果12和12pro有什么区别?参数对比拍照续航,哪个值得买?...
  5. flutter基础布局之 对话框Dialogs
  6. flask架设微信小程序服务器,苹果手机能正常访问,安卓不行(ssl的中间证书问题)
  7. 学科03:工程学重要模型
  8. word文档图片画红线_word文档怎么画线条
  9. KubeCon上海“行业客户云原生最佳实践日“成功举办,云原生在各行业落地生花...
  10. poj2096(概率dp)