lightbox-new and practical display picture effect

Picture Effects | show

lightbox--new and practical display picture effect

"Lightbox" is a chic and easy-to-use picture display that allows a picture to be rendered directly above the current page without having to go to a new window. The text statement is clearly not clear enough, so please take a look at Lightbox 's demo page first.

How to use it?

Lightbox can be very simple to apply to your page. First include lightbox.js to the header portion of your page:

<script src= "Lightbox.js" type= "Text/javascript" ></script>

Add the Rel= "Lightbox" attribute to any linked tag to activate the Lightbox feature, for example:

<a title= "My caption" href= "http://www.webjx.com/htmldata/2006-03-14/images/image-1.jpg" rel= "Lightbox" > Image #1 </a>

You may notice that in the above example, when you open the picture, you will see a descriptive text below the picture. This is controlled by the title attribute. The Title property is an option, which means that you can not write, of course, it is better to briefly explain it.

How to customize?

You can use CSS to decorate the "picture layer", in the example page above, 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 create a shadow effect, you need to prepare a translucent PNG picture and a little CSS. Because of IE's poor support for PNG graphics (it does not support PNG transparency) we have to write more code for it:

#overlay {background-image:url (http://www.webjx.com/htmldata/2006-03-14/overlay.png);}
* HTML #overlay {
Background-color: #000;
Back\ground-color:transparent;
Background-image:url (blank.gif);
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= "http://www.webjx.com/htmldata/2006-03-14/ Overlay.png ", sizingmethod=" scale ");
}

Lightbox.js has a var loadingimage = ' Loading.gif ', which is used to control the "loading ..." effect before the picture is fully loaded, and you can use any image to replace it.
Similarly, var CloseButton = ' Close.gif ', the source of the picture used to control the "close" button.

Download

Lightbox.rar Download instance