How to make your Lightbox support wheel zoom and Base64 images_jquery

When making article-type web pages, you often encounter the need to open the key points to see the big picture. LightBox2 is an excellent Jquery plug-in among many products. I won’t go into details about the configuration. What I mainly want to share today is: how to zoom in and out of the image through the mouse wheel after clicking on the large image,

1. Modify the Lightbox source code to support wheel zoom

The main way to support the mouse wheel is to bind the entire pop-up box to the mousewheel event. Open lightbox.js and find the section Lightbox.prototype.build = function() {...}, which can be found here (lightbox initialization time) Bind the desired scroll wheel event, for example, add the following code at the end of the function:

Copy code The code is as follows:

// Image scroll 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           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
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;
});

The code is easier to understand. It is to add mouse wheel monitoring to both the background and the front image, and then scale the height and width proportionally (scroll up to zoom in, scroll down to zoom out). I set each height change to 20 pixels, and then the width changes proportionally. What needs attention should be the minimum reduced size of the image, and the enlargement of the image cannot exceed the limit of the screen range. At the same time, for a better experience, be sure to add e.stopPropagation() and return false to prevent the browser from scrolling.

2. Modify the Lightbox source code to support Base64 images

It may be troublesome to talk about here. Let’s first take a look at the html code format requirements when using native Lightbox:

Copy code The code is as follows:

Image #1

This is the simplest pop-up image. When you click on Image #1, a lightbox will pop up to display the content of img/image.jpg (pop up an element Now let’s consider this situation. If the image is encoded in Base64 on the server, is it stored in the database? This should be it:

Copy code The code is as follows:

Image #1

Here comes the problem, href length is limited under IE. It is impossible to put a large picture in the href field, and the picture will be castrated (only the upper part will be displayed).
There is another common situation. If I display the small picture first and click on the small picture to see the big picture, it should be like this:

Copy code The code is as follows:

Okay, there are two duplicate base64 data, and they are both transmitted from the server, which is time-consuming and bandwidth-intensive.
So I modified it according to my needs. The code is very simple. Modify the sub-function addToAlbum:

in Lightbox.prototype.start = function($link) {...}

Copy code The code is as follows:

Function addToAlbum($link) {
          self.album.push({
// link: $link.attr('href'),
            link: $link.children().attr("src"),
Title: $link.attr('data-title') || $link.attr('title')
        });
}

The commented out part is the original, $link is the a tag in the previous HTML code, the function of the addToAlbum function after the change is: when setting the src of the pop-up image, characters are no longer taken from the original href as the pop-up src of the img tag, but directly find the src attribute from the sub-element of the a tag. Since the length of the src attribute is unlimited, it will not cause the problem of image truncation.

3. Apply Lightbox to existing articles

Section 2 has already mentioned that HTML has a certain format when using Lightbox. If the pictures in the existing articles are like , they must be modified. Layer encapsulation:

Copy code The code is as follows:

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

Among them, "lightbox-container" is the class of the container where the article is located. The initLightbox function should be placed when the page is ready to load. It will encapsulate all img tags in the article into lightbox format.

That’s it for this article. For points 2 and 3, you can use them according to your own usage scenarios. The focus of lightbox changes is to support scroll wheel zooming.

Attached is the modified lightbox http://xiazai.jb51.net/201412/yuanma/lightbox(jb51.net).rar