When making article-type web pages, you often encounter the need to click to see large pictures. LightBox2 is a relatively excellent Jquery plug-in among many products. I won’t go into details about the configuration. Today I mainly want to share: how to zoom the picture through the mouse scroll wheel after clicking on the large picture.
1. Modify the Lightbox source code to support scroll wheel scaling
Supporting mouse wheels mainly bind the entire pop-up box to the mousewheel event, open lightbox.js, and find Lightbox.prototype.build = function() {...}. You can bind the desired scroll wheel event here (when lightbox is initialized), for example, add the following code at the end of the function:
The code copy is as follows:
// Picture 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, which is to add mouse wheel monitoring to the background and the front image, and then scale the height and width proportionally (roll up to zoom in, scroll down to zoom out). I set the height change to 20 pixels each time, and then the width changes proportionally. What should be noted is that the minimum size of the picture should be reduced, and the picture enlargement cannot exceed the screen range limit. At the same time, for a better experience, you must add e.stopPropagation() and return false to prevent the browser from scrolling.
2. Modify the Lightbox source code to support Base64 pictures
It may be more troublesome to talk about here. Let’s first look at the html code format requirements when using native Lightbox:
The code copy is as follows:
<a href="img/image.jpg" data-lightbox="test">Image #1</a>
This is the easiest pop-up image. When clicking Image #1, a lightbox will pop up to display the content of img/image.jpg (an element <img src="img/image.jpg" />).
Now let's consider this situation, if the image is encoded in Base64 on the server and is stored in the database? It should be like this:
The code copy is as follows:
<a href="data:image/png;base64,iVBORw..." data-lightbox="test">Image #1</a>
The problem is that the length of href is limited under IE. A large picture cannot be placed in the href field, and the picture will be castrated (only the upper part is displayed).
There is another common situation. If I first display the small picture and click on the small picture to see the large picture, it should be like this:
The code copy is as follows:
<a href="data:image/png;base64,iVBORw..." data-lightbox="test">
<img src="data:image/png;base64,iVBORw..." />
</a>
OK, there are two duplicate base64 data, and they are all sent from the server side, which consumes time and bandwidth.
So I modified it according to my needs, the code is very simple, modify the subfunction in Lightbox.prototype.start = function($link) {...} addToAlbum:
The code copy 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. After the modification, the function of the addToAlbum function is: when setting the src for popping up the picture, no longer takes characters from the original href as the src for popping up the img tag, but directly finds the src attribute from the child elements of the a tag. Since the length of the src attribute is unlimited, it will not have the problem of image truncation.
3. Apply Lightbox to existing articles
Section 2 has already talked about the fact that HTML has a certain format when using Lightbox. If the pictures in the existing article are <img src="img/image.jpg">, it must be encapsulated in one layer:
The code copy 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 loads ready, it will encapsulate all img tags in the article into the lightbox format.
That’s all for this article. Points 2 and 3: You can use it in your own usage scenarios. The focus of lightbox changes is to support scroll wheel scaling.
Attached the modified lightbox http://xiazai.VeVB.COM/201412/yuanma/lightbox(VeVB.COM).rar