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.
Why SlimBox ? Its too small in size written using the compact MooTools javascript framework and and fully customizable. Slimbox is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the compact MooTools javascript framework. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2. The newer version of Slimbox is Slimbox2 available for download. Slimbox 2 uses the jQuery library instead of MooTools. View Demo of Slimbox & Slimbox2. I found several improvements & fixed bugs in latest Slimbox versions like
- 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.
- Upload files to your host, Read our post about where to host javascript and css file other than Googlepages.
- Login to your Blogger Account. >> Click on Layout >> Click Edit Html
- Add the below written code below <head> tag.
<link href="http://www.YOURHOST.com/slimbox.css" media="screen" rel="stylesheet" type="text/css" /><script src=http://www.YOURHOST.com/mootools.js type="text/javascript" /><script src=http://www.YOURHOST.com/slimbox.js type="text/javascript" />
Do remember to replace YOURHOST with your file URL. It will look something like the picture below
Done.
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.
0 comments:
Post a Comment