如何让你的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 StringBuilder类实现
Dec 22 Javascript
javascript multibox 全选
Mar 22 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 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中防止SQL注入的最佳解决方法
2013/04/25 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php实现两个数组相加的方法
2015/02/17 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
怎么清空javascript数组
2013/05/11 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
jquery 使用简明教程
2014/03/05 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python中取整的几种方法小结
2017/01/06 Python
Python面向对象之继承代码详解
2018/01/29 Python
python-str,list,set间的转换实例
2018/06/27 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
数据库笔试题
2013/05/09 面试题
大四本科生的自我评价
2013/12/30 职场文书
简单的辞职信范文
2014/01/18 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
Oracle中update和select 关联操作
2022/01/18 Oracle
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
LeetCode189轮转数组python示例
2022/08/05 Python