A Lightbox is a sort of pop-up box, displaying an image over the webpage. It is not a new browser window, but a box that floats over your current browser window.
If you want to see an example, please click on the image below.
If you want to have this Lightbox on your Blog, follow the instructions:
Step 1: Backup your template.
Step 2: Download the following files:
LightBox Javascript code.
Loading-image.
Close-image.
Step 3: Add the following line of code to your template, inside the <head>-section:
<script type='text/javascript' src='yourhost/lightbox.js'/>
Replace "yourhost" with the domainname of the place where you host your scripts and images. Save your template.
Step 4: Upload files
Upload the image files to your webhost. Open the javascript-file in Notepad, and edit the url's of the image-files, so that they link to your host. Save the javascript-file, and upload it too.
Step 5: Adding CSS
Add CSS to style your lightbox.
#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; }
Step 6: Editing your post
Create a post and upload an image. Enter your text, and just make it a nice post.
Then, inside the <a href="..." > tags, add rel="lightbox" and title="Your title" and publish your post. If you click on the image, the large version of your image will pop out of the screen.
Check out this link for more info on lightboxes.
No comments:
Post a Comment