如何让你的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 相关文章推荐
javascript中call和apply方法浅谈
Sep 27 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
js DOM的事件常见操作实例详解
Dec 16 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保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
四个PHP非常实用的功能
2015/09/29 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP实现验证码校验功能
2017/11/16 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
javascript中this指向详解
2016/04/23 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
python文件名和文件路径操作实例
2017/09/29 Python
对python中的argv和argc使用详解
2018/12/15 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
努比亚手机官网:nubia
2016/10/06 全球购物
解除施工合同协议书
2014/10/17 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers