如何让你的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 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
node实现简单的增删改查接口实例代码
Aug 22 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 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之OpCode原理详解
2016/06/01 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
javascript offsetX与layerX区别
2010/03/12 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
javascript每日必学之继承
2016/02/23 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
如何利用find命令查找文件
2016/11/18 面试题
西北政法大学自主招生自荐信
2014/01/29 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
社区活动策划方案
2014/08/21 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android