如何让你的Lightbox支持滚轮缩放及Base64图片


Posted in Javascript onDecember 04, 2014

在做文章类型的web页时,经常会遇到要点开看大图的需求,LightBox2则是在众多产品中比较优秀的一款Jquery插件。配置就不细说了,今天我主要要分享的是:如何在点开大图后,可以通过鼠标滚轮来缩放图片,

1、修改Lightbox源码使支持滚轮缩放

    支持鼠标滚轮主要就是把弹出后的框整个绑定上mousewheel事件,打开lightbox.js,找到Lightbox.prototype.build = function() {...}这一段,可以在这里(lightbox初始化的时候)把想要的滚轮事件绑定上去,比如在函数的末尾添加如下代码:

       // 图片滚轮缩放

       this.img = this.$container.find('.lb-image');

       this.label = this.$lightbox.find('.lb-dataContainer');

       $([this.$overlay[0],this.$lightbox[0]]).bind("mousewheel", function(e){

           var flag= e.originalEvent.wheelDelta < 0; 

           var imgH = self.img.height();

           var imgW = self.img.width();

           var nw = Math.round(20*imgW/imgH);

           var ctH = self.$outerContainer.height();

           var ctW = self.$outerContainer.width();

           var layH = self.$overlay.height()-20;

           var layW = self.$overlay.width()-20;

           // 向下

           if(flag && imgH>20 && imgW>20) {

               self.img.css('height', imgH - 20);

               self.img.css('width', imgW - nw);

               self.$outerContainer.css('height', ctH - 20);

               self.$outerContainer.css('width', ctW - nw);

               if(ctW-nw > 240){

                   self.label.css('width', ctW - nw);

               }

           } else if(!flag && imgH<layH && imgW<layW) {

               self.img.css('height', imgH + 20);

               self.img.css('width', imgW + nw);

               self.$outerContainer.css('height', ctH + 20);

               self.$outerContainer.css('width', ctW + nw);

               self.label.css('width', ctW + nw);

           }  

           e.stopPropagation();

           return false;

       });

    代码比较好理解,就是给后面背景和前面图片都添加鼠标滚轮监听,然后高、宽成比例地缩放(向上滚放大、向下滚缩小),我是设定每次高度变化为20个像素,然后宽度是成比例变化。需要注意的地方,应该是在图片的最小缩小大小,和图片放大不能超过屏幕范围的限制。同时,为了更好的体验,一定要加上e.stopPropagation(),且返回false,让浏览器不要滚动。

2、修改Lightbox源码使支持Base64图片

    这里说起来可能比较麻烦,先来看一下在使用原生Lightbox时的html代码格式要求:

<a href="img/image.jpg" data-lightbox="test">Image #1</a>

    这是一个最简单的弹出图,当点击Image #1时,就会弹出一个lightbox显示img/image.jpg的内容(弹出一个元素<img src="img/image.jpg" />)。
    现在我们来考虑这种情况,如果图片是以Base64编码在服务器是存放在数据库中的?应该就是这样:

<a href="data:image/png;base64,iVBORw..." data-lightbox="test">Image #1</a>

    问题来了,href长度在IE下是有限制的,一张大的图片,不可能放在href字段中,图片将会被阉割(只显示上半部分)。
    另外还有一种普遍情况,如果我是先显示小图,点击小图看大图,应该就是这样:

<a href="data:image/png;base64,iVBORw..." data-lightbox="test">

    <img src="data:image/png;base64,iVBORw..." />

</a>

    好了,这有两份重复的base64数据,而且都是从服务器端传过来的,耗时耗带宽啊。
    所以我按我的需求进行了改造,代码很简单,修改Lightbox.prototype.start = function($link) {...} 中的子函数addToAlbum:

    function addToAlbum($link) {

        self.album.push({

          // link: $link.attr('href'),

          link: $link.children().attr("src"),

          title: $link.attr('data-title') || $link.attr('title')

        });

    }

    注释掉的部分就是原来的,$link是前面HTML代码中的a标签,改过后addToAlbum函数的作用是:在设置弹出图片的src时,不再从原始的的href中取字符作为弹出img标签的src,而是直接从a标签的子元素中找src属性,由于src属性的长度无限制,所以它不会存在图片截断的问题。 

3、将Lightbox应用到已有的文章

    第2节已经讲到了Lightbox使用时HTML有一定的格式,如果已有的文章中的图片是<img src="img/image.jpg">这样的,则必须对其进行一层封装:

 function initLightbox(){

     var imgs = $(".lightbox-container").find('img');

     $.each(imgs,function(i) {

         var img = $(imgs[i]);

         img.wrap("<a href='' data-lightbox='test' ></a>");        

     });

 }

    其中,“lightbox-container”是文章所在容器的class。initLightbox函数应放置在页面加载ready时,它会把文章中的所有img标签都封装成为lightbox的格式。

本文就写到这了,第2、3点大家可以看自己的使用场景去使用,lightbox改动的重点在于支持滚轮缩放。

附上修改过的lightbox  http://xiazai.3water.com/201412/yuanma/lightbox(3water.com).rar

Javascript 相关文章推荐
jQuery Selector选择器小结
May 06 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 Javascript
javascript常用代码段搜集
Dec 04 #Javascript
5种处理js跨域问题方法汇总
Dec 04 #Javascript
用js读、写、删除Cookie代码续篇
Dec 03 #Javascript
js字符串完全替换函数分享
Dec 03 #Javascript
基于jquery实现等比缩放图片
Dec 03 #Javascript
javascript简单实现图片预加载
Dec 03 #Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 #Javascript
You might like
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
vue实现文字加密功能
2019/09/27 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
pyshp创建shp点文件的方法
2018/12/31 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
行政前台岗位职责
2013/12/04 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
今日说法观后感
2015/06/08 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
手写实现JS中的new
2021/11/07 Javascript
Python如何用re模块实现简易tokenizer
2022/05/02 Python