Lightbox-novel and practical image display effects

Lightbox-novel and practical image display effects

"Lightbox" is a chic and easy-to-use image display that allows images to be directly displayed on the current page without being transferred to a new window. The text expression is obviously not clear enough, so take a look at the Lightbox demo page first.

How to use it?

Lightbox can be easily applied to your page. First, include lightbox. js to the header section of your page:

<Script src = "lightbox. js" type = "text/javascript"> </script>

Add the rel = "lightbox" attribute to any link tag to activate the Lightbox function. For example:

<A title = "my caption" href = "images/image-1.jpg" rel = "lightbox"> image #1 </a>

You may have noticed that in the above example, when you open the image, you will see a description text below the image. This is controlled by the title attribute. The title attribute is optional, that is, you can leave it empty. Of course, it is better to briefly describe it.

How to customize it?

You can use CSS to modify the "image layer". In the preceding sample page, we use the following CSS code:

# 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 ;}
# Lightbox img {border: none ;}
# Overlay img {border: none ;}

To produce a shadow effect, you need to prepare a translucent PNG image and a little CSS. Since IE has poor support for PNG images (it does not support PNG transparency), we have to write more code for it:

# Overlay {background-image: url(overlay.png );}
* Html # overlay {
Background-color: #000;
Background-color: transparent;
Background-image: url(blance.gif );
Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src = "overlay.png", sizingMethod = "scale ");
}

Lightbox. js has a var loadingImage = ''loading.gif '. It is used to control the effect of "Loading..." before the image is fully loaded. You can use any image to replace it.
Similarly, var closeButton = 'close.gif 'is used to control the image source of the "close" button.

<