How to make your Lightbox support scroll zooming and Base64 images

LightBox2 is one of the best Jquery plug-ins in many products. I won't go into the details of the configuration, but what I want to share today is: how to zoom in and out of a large image by clicking on it,

       //Image wheel zoom 

       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;

           //Down < br / >
           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;

       });

      The code is easy to understand, which is to add a mouse wheel to the background and the previous image, and then scale the height and width proportionally (scroll up to enlarge, scroll down to shrink). I set the height change to 20 pixels each time, and then the width to scale. Attention should be paid to the minimum reduction size of the image, and the size of the image should not exceed the limit of the screen. Also, for a better experience, be sure to add e.toppropagation () and return false so the browser doesn't scroll.

      This is a bit of a hassle to talk about, but let's take a look at the formatting requirements for HTML code when using a native Lightbox:

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

      This is the simplest popup Image. When you click Image #1, a lightbox pops up with the contents of img/image.jpg (an element < Img SRC = "img/image. JPG" / >) .
      Now let's consider this case, if the image is Base64 encoded in the server and is stored in the database, right? This should be it:

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

      The problem is that the href length is limited under IE, a large image cannot be placed in the href field, and the image will be neutered (only the top half is shown).
      There is also a common case, if I show the small picture first, click on the small picture to see the big picture, it should be like this:

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

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

</a>

      Okay, so there's two duplicate base64 data, and they're both sent from the server side, which takes a lot of bandwidth.
      So I modified it according to my requirements, the code is very simple, modify lightbox.prototype.start = function($link) {... Child function addToAlbum in} :

    function addToAlbum($link) {

        self.album.push({

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

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

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

        });

    }

      Commented out of the part is original, $link is a tag in the HTML code, change after addToAlbum function is: in the Settings pop-up image SRC, not from the original character of the href of as pop-up img SRC labels, but directly from a label of child elements for the SRC attribute, due to the length of the SRC attribute unrestricted, pictures of truncation problems so it won't.  

3. Apply lightboxes to existing articles

      In section 2, you already saw that lightboxes use HTML in a certain format, if the images in the existing article are < Img SRC = "img/image. JPG" > In this case, it must be encapsulated in a layer:

 function initLightbox(){

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

     $.each(imgs,function(i) {

         var img = $(imgs[i]);

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

     });

 }

      Where, "lightbox-container" is the class of the container in which the article resides. The initLightbox function should be placed when the page is ready to load, and it will wrap all the img tags in the article into a lightbox format.

Attach a modified lightbox& cake; (link: http://xiazai.jb51.net/201412/yuanma/lightbox (jb51.net). Rar)