Lightbox-novel and practical image display effects

Source: Internet
Author: User

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.

<

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.