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 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代碼格式要求：

代碼如下:
Image #1

這是一個最簡單的彈出圖，當點擊Image #1時，就會彈出一個lightbox顯示https://www.gxlcms.com/img/image.jpg的內容（彈出一個元素）。
現在我們來考慮這種情況，如果圖片是以Base64編碼在服務器是存放在數據庫中的？應該就是這樣：

代碼如下:
Image #1

問題來了，href長度在IE下是有限制的，一張大的圖片，不可能放在href字段中，圖片將會被閹割（只顯示上半部分）。
另外還有一種普遍情況，如果我是先顯示小圖，點擊小圖看大圖，應該就是這樣：

代碼如下:

好了，這有兩份重復的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有一定的格式，如果已有的文章中的圖片是這樣的，則必須對其進行一層封裝：

代碼如下:
function initLightbox(){
var imgs = $(".lightbox-container").find('img');
$.each(imgs,function(i) {
var img = $(imgs[i]);
img.wrap("");
});
}

其中，“lightbox-container”是文章所在容器的class。initLightbox函數應放置在頁面加載ready時，它會把文章中的所有img標簽都封裝成為lightbox的格式。

本文就寫到這了，第2、3點大家可以看自己的使用場景去使用，lightbox改動的重點在于支持滾輪縮放。

附上修改過的lightbox http://xiazai.jb51.net/201412/yuanma/lightbox(jb51.net).rar

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com