Lightbox effect lbs window opens locally

Recently, I found a cool page effect on the LBS forum. It is lightbox. The preview of the image processed in this method is cool. You can click the figure below to try it out. The specific method is later
First, upload all the image files in the provided compressed package to your space, for example, images.

Then, modify the lightbox. js file in the compressed package and change the image addresses of lines 38 and 39 to the image addresses you just uploaded, such as images/close.gif and images/loading.gif. Upload the modified lightbox. js file to the root directory of your blog.

NextCodePaste it to the styles.css file related to the style used by your blog. Note that, in the following code, the two sections "images/overlay.png" must be changed to the storage path of your own overlay.png file.

Copy code The Code is as follows:/******** lightbox styles ******/
# Lightbox {
Background-color: # Eee;
Padding: 10px;
Border-bottom: 2px solid #666;
Border-Right: 2px solid #666;
}
# Lightboxdetails {
Font-size: 0.8em;
Padding-top: 0.4em;
}
# Lightboxcaption {float: Left ;}
# Keyboardmsg {float: Right ;}
# Closebutton {top: 5px; Right: 5px ;}

# Lightbox IMG {border: none; clear: Both ;}
# Overlay IMG {border: none ;}
# Overlay {background-image: URL (images/overlay.png );}

* Html # overlay {
Background-color: #000;
Back \ ground-color: transparent;
Background-image: url(blance.gif );
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (src = "images/overlay.png", sizingmethod = "scale ");
}

Next, you need to modify the default. asp and article. asp files (if you want to use this effect on other pages, you can refer to the modification)

Find the following code:
<Div id = "mainwrapper">
<Div id = "content" class = "content">

Add the following code
<SCRIPT type = "text/JavaScript" src = "lightbox. js"> </SCRIPT>

Finally, modify class/ubbcode. ASP file (in fact, the following modifications only add the rel = "lightbox" control attribute on the links of various types of images. To avoid unnecessary errors, replace the entire code segment)

Find the following code: Copy code The Code is as follows: // process IMG tags --------------------------------
If (bimage = "1 "){
Re =/\ [img \] ([^ <>] *?) \ [\/IMG \]/ig;
While (arrmatch = re.exe C (STR ))! = NULL ){
VaR strurl = func. checkurl (arrmatch [1]);
If (strurl. indexof (": //") <0) strurl = baseurl + strurl;
Strurl = func. urlencode (strurl );
VaR newstr = '<Div style = "width: 100%; overflow-X: auto; "> <a href =" '+ strurl +' "target =" _ blank "> </a> </div> ';
STR = Str. Replace (arrmatch [0], newstr );
Re. lastindex + = newstr. Length-arrmatch [0]. length;
}
Re =/\ [img = (left | right | Center) \] ([^ <>] *?) \ [\/IMG \]/ig;
While (arrmatch = re.exe C (STR ))! = NULL ){
VaR stralign = arrmatch [1];
VaR strurl = func. checkurl (arrmatch [2]);
If (strurl. indexof (": //") <0) strurl = baseurl + strurl;
Strurl = func. urlencode (strurl );
VaR newstr = "";
If (stralign = "center "){
Newstr = '<center> <a href = "' + strurl + '" target = "_ blank"> </a> </center> ';
} Else {
Newstr = '<a href = "' + strurl + '" target = "_ blank"> </a> ';
}
STR = Str. Replace (arrmatch [0], newstr );
Re. lastindex + = newstr. Length-arrmatch [0]. length;
}
Re =/\ [img = (\ D * |), (\ D * |) (, left |, right |, center |, absmiddle |) \] ([^ <>] *?) \ [\/IMG \]/ig;
While (arrmatch = re.exe C (STR ))! = NULL ){
VaR strwidth = arrmatch [1];
VaR strheight = arrmatch [2];
VaR stralign = arrmatch [3]. Slice (1 );
VaR strurl = func. checkurl (arrmatch [4]);
If (strurl. indexof (": //") <0) strurl = baseurl + strurl;
Strurl = func. urlencode (strurl );
VaR newstr = "";
If (stralign = "center "){
Newstr = '<center> <a href = "' + strurl + '" target = "_ blank"> </a> </center> ';
} Else {
Newstr = '<a href = "' + strurl + '" target = "_ blank"> </a> ';
}
STR = Str. Replace (arrmatch [0], newstr );
Re. lastindex + = newstr. Length-arrmatch [0]. length;
}
} Else if (bimage = "2 "){
Re =/\ [img ([^ \] *) \] ([^ <>] *?) \ [\/IMG \]/ig;
While (arrmatch = re.exe C (STR ))! = NULL ){
VaR strurl = func. checkurl (arrmatch [2]);
If (strurl. indexof (": //") <0) strurl = baseurl + strurl;
Strurl = func. urlencode (strurl );
VaR newstr = '<a href = "' + strurl + '" target = "_ blank"> '+ strurl +' </a> ';
STR = Str. Replace (arrmatch [0], newstr );
Re. lastindex + = newstr. Length-arrmatch [0]. length;
}
}

Modify it to the following code: Copy code The Code is as follows: // process IMG tags --------------------------------
If (bimage = "1 "){
Re =/\ [img \] ([^ <>] *?) \ [\/IMG \]/ig;
While (arrmatch = re.exe C (STR ))! = NULL ){
VaR strurl = func. checkurl (arrmatch [1]);
If (strurl. indexof (": //") <0) strurl = baseurl + strurl;
Strurl = func. urlencode (strurl );
VaR newstr = '<Div style = "width: 100%; overflow-X: auto; "> <a href =" '+ strurl +' "rel =" lightbox "target =" _ blank "> </a> </div> ';
STR = Str. Replace (arrmatch [0], newstr );
Re. lastindex + = newstr. Length-arrmatch [0]. length;
}
Re =/\ [img = (left | right | Center) \] ([^ <>] *?) \ [\/IMG \]/ig;
While (arrmatch = re.exe C (STR ))! = NULL ){
VaR stralign = arrmatch [1];
VaR strurl = func. checkurl (arrmatch [2]);
If (strurl. indexof (": //") <0) strurl = baseurl + strurl;
Strurl = func. urlencode (strurl );
VaR newstr = "";
If (stralign = "center "){
Newstr = '<center> <a href = "' + strurl + '" rel = "lightbox" target = "_ blank"> </a> </center> ';
} Else {
Newstr = '<a href = "' + strurl + '" rel = "lightbox" target = "_ blank"> </a> ';
}
STR = Str. Replace (arrmatch [0], newstr );
Re. lastindex + = newstr. Length-arrmatch [0]. length;
}
Re =/\ [img = (\ D * |), (\ D * |) (, left |, right |, center |, absmiddle |) \] ([^ <>] *?) \ [\/IMG \]/ig;
While (arrmatch = re.exe C (STR ))! = NULL ){
VaR strwidth = arrmatch [1];
VaR strheight = arrmatch [2];
VaR stralign = arrmatch [3]. Slice (1 );
VaR strurl = func. checkurl (arrmatch [4]);
If (strurl. indexof (": //") <0) strurl = baseurl + strurl;
Strurl = func. urlencode (strurl );
VaR newstr = "";
If (stralign = "center "){
Newstr = '<center> <a href = "' + strurl + '" rel = "lightbox" target = "_ blank"> </a> </center> ';
} Else {
Newstr = '<a href = "' + strurl + '" rel = "lightbox" target = "_ blank"> </a> ';
}
STR = Str. Replace (arrmatch [0], newstr );
Re. lastindex + = newstr. Length-arrmatch [0]. length;
}
} Else if (bimage = "2 "){
Re =/\ [img ([^ \] *) \] ([^ <>] *?) \ [\/IMG \]/ig;
While (arrmatch = re.exe C (STR ))! = NULL ){
VaR strurl = func. checkurl (arrmatch [2]);
If (strurl. indexof (": //") <0) strurl = baseurl + strurl;
Strurl = func. urlencode (strurl );
VaR newstr = '<a href = "' + strurl + '" rel = "lightbox" target = "_ blank"> '+ strurl +' </a> ';
STR = Str. Replace (arrmatch [0], newstr );
Re. lastindex + = newstr. Length-arrmatch [0]. length;
}
}

==========================================================
Note: This effect has already become popular in many personal blogs. Currently, the only drawback is that you need to click an image when the page is fully loaded, as long as there are some invalid image addresses on the page, the page loading will be slow or paused. You can resume loading only when you click the cross button in the browser to manually terminate the page loading. In order to continue playing cool, you can often clear invalid images. Hoho.
3. Integrated modification of lightbox effects and automatic scaling of images
Adaptive Image Size and lightbox can coexist. First, modify the adaptive image size. Then, to add the lightbox effect, you only need to change the modification method of class/ubbcode. asp. That is, do not copy the modified Code provided by me in the whole segment. Instead, manually add rel = "lightbox" to the link code of all images in ubbcode. asp ".

In a simple example, no image link code for adaptive image size is added.
<A href = "'+ strurl +'" target = "_ blank">
Change it
<A href = "'+ strurl +'" rel = "lightbox" target = "_ blank">
.. After adding the adaptive image size effect, you only need to modify the corresponding image link code. Other changes do not need to be changed!

After modifying the lightbox effect, I fixed the reference code for adaptive image size. In ubbcode. asp, I found the following code:
VaR newstr = '<Div style = "width: 100%; overflow-X: auto; "> <a href =" '+ strurl +' "rel =" lightbox "target =" _ blank "> </a> </div> ';
Change it
VaR newstr = '<Div style = "width: 100%; "> <a href =" '+ strurl +' "rel =" lightbox "target =" _ blank "> 500) This. width = 500; "alt =" if the image is reduced, click zoom in! The ideal of life is for the ideal life! WeChat Life Pen talk about http: // lifeblog. ZJ. com "/> </a> </div> ';
Lightbox local download