Javascript lightbox Effect

Recently, a mobile website needs to develop an image to zoom in and out. I wanted to use the lightbox frameworkCodeBut there are too many codes, so I wrote one myself.

It mainly uses the transparency in the style and the DIV center display.

Layout style

 
<Style type = "text/CSS">. Lay{Position:Absolute;Z-Index:998;Margin:0 auto;Top:0;Height:100%;Width:100%;Background:Rgba (0, 0, 0, 0.3);}</Style>
 

An issue occurs when you bind events to multiple images. That is, I first use a loop to determine the number of IMG elements and then bind events to each element. Because I write code like this

 
For(VaRI = 0; I <$ (". PIC. IMG"). length; I ++) {$ (". PIC. IMG"). Get (I). addeventlistener ("click ",Function(){
Alert (I );$ (". FUC"). Get (I). style. Display = "NONE"; Tobiggerpic (I );})
}
 

If the code is written like this, there will be a problem. If so, if the number of images added is 5, the write I value will always be 5.

This is mainly about scope. The upper-level scope of the bound function is window, and its value is 5 after the end of the loop. Therefore, 5 is displayed in any case. The solution is to reset the scope, that is, to use the so-called closure.

New Code:

 For(VaRI = 0; I <$ (". PIC. IMG"). length; I ++) {$ (". PIC. IMG"). Get (I). addeventlistener ("click ",(Function(I ){ReturnFunction(){
Alert (I); $ (". FUC"). Get (I). style. Display = "NONE"; Tobiggerpic (I) ;}}) (I ),False);
 

In addition, my Div requires that the IMG image be fully loaded before it can be resized and centered. You need to determine whether the image is fully loaded before making a judgment.

This is because the page on the mobile phone determines whether the image is loaded and the PC end is different. The IMG. onload method is executed when the image is loaded for the first time. However, after the image is loaded, the image is read from the cache directly without executing the code in window. onload. Therefore, you need to determine whether the image is loaded for the first time. Code:

 Function Tobiggerpic (I) {$ ( ". Layout"). Get (0). style. Display = "Block" ; $ ( ". Poporigpic2"). Get (0). style. Display = "Block" ; $ ( ". Poporigpic2 IMG "). get (0 ). setattribute ("src", $ (". PIC. IMG "). get (I ). getattribute ("src "). replace (/B/, "G" ));  /*  Because the browser only executes the onload function when loading images for the first time. To execute centered code later. Adds an attribute to determine whether the image is loaded.  */      If ($ (". Poporigpic2 IMG"). Get (0). getattribute ("complete") = "complete" ) {Vmiddle ($ ( ". Poporigpic2"). Get (0));}  Else  {$ ( ". Poporigpic2 IMG"). Get (0). onload = Function  () {$ ( ". Poporigpic2 IMG"). Get (0). setattribute ("complete", "complete" ); Vmiddle ($ ( ". Poporigpic2"). Get (0 ));}}} 

At last, there was a problem in the display of the mask layer during tests on different mobile phones.

In the android browser, add a click event to the mask layer to hide the event. Then, the mask layer becomes yellow and disappears. The solution was to add a div outside the mask layer and add a click event to the div.

Code address: http://www.cnblogs.com/zzcflying/admin/files.aspx. Testpic file.