How to get your lightbox support for wheel scaling and Base64 pictures _jquery

When it comes to types of Web pages, you often encounter the need to see the big picture, LightBox2 is the most excellent in many products, a jquery plug-in. Configuration is not in detail, today I would like to share the main: How to open a large picture, you can use the mouse wheel to zoom pictures,

1, modify the Lightbox source to support the wheel zoom

Support the mouse wheel is the main pop-up box after the entire binding MouseWheel event, open lightbox.js, find Lightbox.prototype.build = function () {...} This section can be used here (Lightbox initialization) to bind the desired wheel event, such as adding the following code at the end of the function:

Copy Code code 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 better to understand, is to the background and the front of the picture are added mouse wheel listening, and then high, wide proportional scaling (roll up zoom up, roll down to reduce), I was set each height change to 20 pixels, and then the width is proportional to change. The place to note should be the smallest size in the picture, and the picture magnification cannot exceed the screen range limit. Also, for a better experience, be sure to add e.stoppropagation () and return false so that the browser does not scroll.

2, modify the Lightbox source to support Base64 pictures

This might be a bit of a hassle, but let's take a look at the HTML code format requirements when using native Lightbox:

Copy Code code as follows:

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

This is the simplest pop-up image, when clicked on the image #1时, will pop up a lightbox display img/image.jpg content (pop-up an element ).
Now let's consider the situation, if the picture is BASE64 encoded in the server is stored in the database? That's the way it should be:

Copy Code code as follows:

<a href= "DATA:IMAGE/PNG;BASE64,IVBORW" data-lightbox= "test" >image #1 </a>

The problem is, the href length is limited under IE, a large picture cannot be placed in the HREF field, and the picture will be castrated (showing only the top half).
There is also a general situation, if I was to show the small map first, click on the small picture to see the big picture, it should be so:

Copy Code code as follows:

<a href= "Data:image/png;base64,ivborw ..." data-lightbox= "Test" >

</a>

OK, here are two duplicate Base64 data, and it's all coming from the server, and it's time-consuming and bandwidth consuming.
So I was transformed according to my requirements, the code is simple, modify Lightbox.prototype.start = function ($link) {...} addtoalbum:

Copy Code code 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 comment out of the part is the original, $link is the previous HTML code in the a tag, after the Addtoalbum function is changed: In the setting of the SRC pop-up picture, no longer from the original href character as pop-up img tag src, Instead, find the SRC attribute directly from the child element of a tag, because the SRC attribute has no unlimited length, so it does not have a problem with image truncation.

3. Apply Lightbox to existing articles

The 2nd section has already talked about Lightbox use when the HTML has a certain format, if the existing article in the picture is such, you must be a layer of encapsulation:

Copy Code code 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>");
});
}

where "Lightbox-container" is the class of the container in which the article is located. The Initlightbox function should be placed in the page load ready, it will encapsulate all the IMG tags in the article into the Lightbox format.

This article is written here, 2nd, 3 points you can see their own use of the scene to use, Lightbox change is the focus of support wheel scaling.

Attached modified Lightbox Http://xiazai.jb51.net/201412/yuanma/lightbox (jb51.net). rar