快捷導(dǎo)航

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

更新時(shí)間：2014年12月04日 09:29:11 投稿：hebedich

本文主要是記錄了1、修改Lightbox源碼使支持滾輪縮放；2、修改Lightbox源碼使圖片的源可支持base64格式；3、如何將Lightbox應(yīng)用到已有的文章。非常的簡(jiǎn)單實(shí)用，正在使用lightbox的小伙伴可以重點(diǎn)看下，應(yīng)用到自己項(xiàng)目中，立刻高大上了

在做文章類型的web頁(yè)時(shí)，經(jīng)常會(huì)遇到要點(diǎn)開看大圖的需求，LightBox2則是在眾多產(chǎn)品中比較優(yōu)秀的一款Jquery插件。配置就不細(xì)說(shuō)了，今天我主要要分享的是：如何在點(diǎn)開大圖后，可以通過(guò)鼠標(biāo)滾輪來(lái)縮放圖片，

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

支持鼠標(biāo)滾輪主要就是把彈出后的框整個(gè)綁定上mousewheel事件，打開lightbox.js，找到Lightbox.prototype.build = function() {...}這一段，可以在這里（lightbox初始化的時(shí)候）把想要的滾輪事件綁定上去，比如在函數(shù)的末尾添加如下代碼：

復(fù)制代碼代碼如下:

       // 圖片滾輪縮放

       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;

       });

代碼比較好理解，就是給后面背景和前面圖片都添加鼠標(biāo)滾輪監(jiān)聽，然后高、寬成比例地縮放（向上滾放大、向下滾縮?。?，我是設(shè)定每次高度變化為20個(gè)像素，然后寬度是成比例變化。需要注意的地方，應(yīng)該是在圖片的最小縮小大小，和圖片放大不能超過(guò)屏幕范圍的限制。同時(shí)，為了更好的體驗(yàn)，一定要加上e.stopPropagation()，且返回false，讓瀏覽器不要滾動(dòng)。

2、修改Lightbox源碼使支持Base64圖片

這里說(shuō)起來(lái)可能比較麻煩，先來(lái)看一下在使用原生Lightbox時(shí)的html代碼格式要求：

復(fù)制代碼代碼如下:

<a href="img/image.jpg" data-lightbox="test">Image #1</a>

這是一個(gè)最簡(jiǎn)單的彈出圖，當(dāng)點(diǎn)擊Image #1時(shí)，就會(huì)彈出一個(gè)lightbox顯示img/image.jpg的內(nèi)容（彈出一個(gè)元素<img src="img/image.jpg" />）。
現(xiàn)在我們來(lái)考慮這種情況，如果圖片是以Base64編碼在服務(wù)器是存放在數(shù)據(jù)庫(kù)中的？應(yīng)該就是這樣：

復(fù)制代碼代碼如下:

<a href="data:image/png;base64,iVBORw..." data-lightbox="test">Image #1</a>

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

復(fù)制代碼代碼如下:

<a href="data:image/png;base64,iVBORw..." data-lightbox="test">

    <img src="data:image/png;base64,iVBORw..." />

</a>

好了，這有兩份重復(fù)的base64數(shù)據(jù)，而且都是從服務(wù)器端傳過(guò)來(lái)的，耗時(shí)耗帶寬啊。
所以我按我的需求進(jìn)行了改造，代碼很簡(jiǎn)單，修改Lightbox.prototype.start = function($link) {...} 中的子函數(shù)addToAlbum:

復(fù)制代碼代碼如下:

    function addToAlbum($link) {

        self.album.push({

          // link: $link.attr('href'),

          link: $link.children().attr("src"),

          title: $link.attr('data-title') || $link.attr('title')

        });

    }

注釋掉的部分就是原來(lái)的，$link是前面HTML代碼中的a標(biāo)簽，改過(guò)后addToAlbum函數(shù)的作用是：在設(shè)置彈出圖片的src時(shí)，不再?gòu)脑嫉牡膆ref中取字符作為彈出img標(biāo)簽的src，而是直接從a標(biāo)簽的子元素中找src屬性，由于src屬性的長(zhǎng)度無(wú)限制，所以它不會(huì)存在圖片截?cái)嗟膯栴}。

3、將Lightbox應(yīng)用到已有的文章

第2節(jié)已經(jīng)講到了Lightbox使用時(shí)HTML有一定的格式，如果已有的文章中的圖片是<img src="img/image.jpg">這樣的，則必須對(duì)其進(jìn)行一層封裝：

復(fù)制代碼代碼如下:

 function initLightbox(){

     var imgs = $(".lightbox-container").find('img');

     $.each(imgs,function(i) {

         var img = $(imgs[i]);

         img.wrap("<a href='' data-lightbox='test' ></a>");        

     });

 }

其中，“l(fā)ightbox-container”是文章所在容器的class。initLightbox函數(shù)應(yīng)放置在頁(yè)面加載ready時(shí)，它會(huì)把文章中的所有img標(biāo)簽都封裝成為lightbox的格式。

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

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

您可能感興趣的文章: