Lightbox改造——支持滾輪縮放

    在作文章類型的web頁時，常常會遇到要點開看大圖的需求，LightBox2則是在衆多產品中比較優秀的一款Jquery插件。配置就不細說了，今天我主要要分享的是：如何在點開大圖後，能夠經過鼠標滾輪來縮放圖片，下面是一個簡單的指引：

　　一、修改Lightbox源碼使支持滾輪縮放

　　二、修改Lightbox源碼使圖片的源可支持base64格式

　　三、如何將Lightbox應用到已有的文章

 

一、修改Lightbox源碼使支持滾輪縮放

    支持鼠標滾輪主要就是把彈出後的框整個綁定上mousewheel事件，打開lightbox.js，找到Lightbox.prototype.build = function() {...}這一段，能夠在這裏（lightbox初始化的時候）把想要的滾輪事件綁定上去，好比在函數的末尾添加以下代碼：

 1       // 圖片滾輪縮放
 2       this.img = this.$container.find('.lb-image');
 3       this.label = this.$lightbox.find('.lb-dataContainer');
 4       $([this.$overlay[0],this.$lightbox[0]]).bind("mousewheel", function(e){
 5           var flag= e.originalEvent.wheelDelta < 0; 
 6           var imgH = self.img.height();
 7           var imgW = self.img.width();
 8           var nw = Math.round(20*imgW/imgH);
 9           var ctH = self.$outerContainer.height();
10           var ctW = self.$outerContainer.width();
11           var layH = self.$overlay.height()-20;
12           var layW = self.$overlay.width()-20;
13           // 向下
14           if(flag && imgH>20 && imgW>20) {
15               self.img.css('height', imgH - 20);
16               self.img.css('width', imgW - nw);
17               self.$outerContainer.css('height', ctH - 20);
18               self.$outerContainer.css('width', ctW - nw);
19               if(ctW-nw > 240){
20                   self.label.css('width', ctW - nw);
21               }
22           } else if(!flag && imgH<layH && imgW<layW) {
23               self.img.css('height', imgH + 20);
24               self.img.css('width', imgW + nw);
25               self.$outerContainer.css('height', ctH + 20);
26               self.$outerContainer.css('width', ctW + nw);
27               self.label.css('width', ctW + nw);
28           }  
29           e.stopPropagation();
30           return false;
31       });

    代碼比較好理解，就是給後面背景和前面圖片都添加鼠標滾輪監聽，而後高、寬成比例地縮放（向上滾放大、向下滾縮小），我是設定每次高度變化爲20個像素，而後寬度是成比例變化。須要注意的地方，應該是在圖片的最小縮小大小，和圖片放大不能超過屏幕範圍的限制。同時，爲了更好的體驗，必定要加上e.stopPropagation()，且返回false，讓瀏覽器不要滾動。

 

二、修改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屬性的長度無限制，因此它不會存在圖片截斷的問題。 

 

三、將Lightbox應用到已有的文章

    第2節已經講到了Lightbox使用時HTML有必定的格式，若是已有的文章中的圖片是<img src="img/image.jpg">這樣的，則必須對其進行一層封裝：

1 function initLightbox(){
2     var imgs = $(".lightbox-container").find('img');
3     $.each(imgs,function(i) {
4         var img = $(imgs[i]);
5         img.wrap("<a href='' data-lightbox='test' ></a>");        
6     });
7 }

    其中，「lightbox-container」是文章所在容器的class。initLightbox函數應放置在頁面加載ready時，它會把文章中的全部img標籤都封裝成爲lightbox的格式。

   

    本文就寫到這了，第二、3點你們能夠看本身的使用場景去使用，lightbox改動的重點在於滾輪縮放。

    附上改造過的源碼lightbox.js。    

    轉載請註明原址：http://www.cnblogs.com/lekko/p/4141218.html