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 < 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
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 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:

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

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 <img src="img/image.jpg" /> ;).
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:

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

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:

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

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 <img src="img/image.jpg">, 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("<a href='' data-lightbox='test' ></a>"); });
}

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

Repo: How To Revive Teammates

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

3 weeks ago By 王林

Show More

Hot tools Tags

Code&IT

Voice

Business

Marketing

AI Detector

Chatbot

Design&Art

Hot Article

Repo: How To Revive Teammates

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

3 weeks ago By 王林

Show More

Hot Article Tags

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7296

9

Java Tutorial

1622

14

CakePHP Tutorial

1342

46

Laravel Tutorial

1259

25

PHP Tutorial

1206

29

Show More