Make image preview with lightbox.js

Overview

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

Example

To make sense of it all, check out these examples. Click on a thumbnail or text link below:

Example Click HERE

How to Use:


1.Log in to blogger -> layout -> edit html
2.search code <b:skin> and copy this script and paste before the above code

<script src='http://h1.ripway.com/kriep2/lightbox.js' type='text/javascript'/>
<link href='http://h1.ripway.com/kriep2/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

3.search code ]]></b:skin> and copy this script and paste before the above 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; }

#overlay{ background-image: url("http://h1.ripway.com/kriep2/overlay.png"); }

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

4.save your template

In your posting image give Add rel="lightbox" attribute to any link tag to activate the lightbox. For example:

<a href="http://UR_IMAGE_URL" target="_blank" title="UR_IMAGE_TITLE" rel="lightbox">
<img src="http://http://UR_IMAGE_URL" alt="image name" height="50" width="50" /></a>






Related Article for this post :