 |
| LightBox effect |
jQuery Lightbox plugin for Blogger is going to be used in this post.
Now before getting into details, you might want to see the Lightbox effect in action (click on the image below to enlarge).
How To steps to add The Lightbox effect:
Login to Blogger Dashboard, go to Design, Edit HTML:
Add the following code right before the </head> tag:
<link href="http://lightbox-blogger.googlecode.com/files/lightbox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://lightbox-blogger.googlecode.com/files/jquery.min.js" type="text/javascript"></script>
<script src="http://lightbox-blogger.googlecode.com/files/lightbox.min.js" type="text/javascript"></script>
This will add the CSS and JS files into your template.
These files are hosted in my Google Code project, but you can download them (with links above) and save into your favorite host.
How to use
Once you’ve done the installation, whenever you want to add Lightbox effect, switch editor mode to HTML, and wrap the image IMG tag inside a A tag as the following code:
<a href="url of the full-size image"><img src="url of the thumbnail" /></a>
Using Lightbox in blog posts is a good way to keep visitors not browsing to other pages for just viewing ONE image. One of other advantages of using Lightbox is that you can use thumbnails in post content instead of full-size images, that reduces total size of page, thus reduces page loading time.
:)
Update 1: Saturday, September 10, 2011
i've posted another post to explain how to add the LightBox effect to blogger to work with the new blogger templates changes @the post "How to Fix Lightbox Effect for Blogger"