如何讓你的Lightbox支援滾輪縮放及Base64圖片_jquery

在做文章類型的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            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顯示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