Have you ever noticed that magical effect on some websites when you click some image. If not, see this Demo site created by Gecko. The effect used in demo site is called Light Box. Want to install this feature in your blogger blog ? Below you will find step by step guide.
- Ready to launch feature
- Vertical & Horizontal image alignments
- Works with almost every browser
- Temporary hides flash animation and embedded videos while running to avoid display bugs
- Loops Feature to naviagate between first & last images
- Faster response, Keyboard & Mouse input for navigation
Size really matters in case of webpage loading time. The total download size for the required modules of MooTools 1.2 + Slimbox 1.7, both minified and gzipped, is as small as 16 KB. Without gzipping, it’s 50 KB. By comparison, the download size of the original Lightbox 2.04 and its required libraries is 44 KB with gzip compression. Without gzipping, it’s 186 KB.
How to Install SlimBox in Blogger :
Step by Step Guide to Install Slimbox (lightbox) in blogger.
- First of all, Download Slimbox 1.7 for MooTools 1.2.
- Once you download the zip file, unzip it.
- Login to your Blogger Account. >> Click on Layout >> Click Edit Html
- Add the below written code below <head> tag.
Do remember to replace YOURHOST with your file URL. It will look something like the picture below
Now all you need to do is to add rel=”lightbox” attribute to the links(URL) pointing to your full-sized images. Once you uploaded the image, all you have to do is simply add code (see screenshot below) with rel=”lightbox”
<a href="http://YOURHOST.com/YOUR_IMAGE.jpg" rel="lightbox" title="IMAGE_TITLE"></a>
You can try several LightBox clones with different framework and libraries. Visit Lightbox Cones Matrix project.
Related : How to Add Social Bookmarking Buttons below Blog Posts.