Sunday, January 31, 2010
Widgets
Lightbox is a simple but great script used to show images in your website in such a brilliant way. First of all, I would like to give the credit to creator of this brilliant script, Lokesh Dhakar. You can create an image gallery/album to be shown to your blog readers using this great script. If you don't know what actually Lightbox is, look at the demo at the bottom of the page.
Setup
To install this script to your blog, go to Layout > Edit HTML and find this</head> tag. And now replace that tag with the codes below.
<style>
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpSLbVnrIPDeVzzoJJ8fnTv8ZvHCeXEWqAXOY1hIjTtC14yL9PE3nMFStS5t1axfMYN4UlFo_PkoNCOuqZla3sZpOnNVanoo6HnY4u8JpUS2YboB6AbGWFwTMx8xFsTWPHMBhv8P0O1Kk/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4tbbkvla1tTmtKxYle4vWX85e6hlYTg5S4lYYodN1_4e4w4turN_hnOEW9_vTwFR0xHBSFkqAkr1P570mO4gUARq8oKvlG6_-edOZd6QAvbRl_3fhINjxTD6upRs-5fiD_P9N4zwYLM/) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
</head>
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpSLbVnrIPDeVzzoJJ8fnTv8ZvHCeXEWqAXOY1hIjTtC14yL9PE3nMFStS5t1axfMYN4UlFo_PkoNCOuqZla3sZpOnNVanoo6HnY4u8JpUS2YboB6AbGWFwTMx8xFsTWPHMBhv8P0O1Kk/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4tbbkvla1tTmtKxYle4vWX85e6hlYTg5S4lYYodN1_4e4w4turN_hnOEW9_vTwFR0xHBSFkqAkr1P570mO4gUARq8oKvlG6_-edOZd6QAvbRl_3fhINjxTD6upRs-5fiD_P9N4zwYLM/) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
</head>
And click Save.
Okey, now we are going to add our images. First upload your photos in Blogger. Read this post on hosting your images in Blogger for free.
Single Image
To activate the Lightbox, add a
rel="lightbox" attribute to any link tag. For example: <a href="your_image_url_here" rel="lightbox"><img src="your_image _thumbnail_url_here">image #1</a>
Optional: Use the title attribute if you want to show a caption.
Demo:
Gallery/Album
If you want to show your images as an album/gallery, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<a href="your_image_url_here_1" rel="lightbox[albumname]"><img src="your_image _thumbnail_url_here">image #1</a>
<a href="your_image_url_here_2" rel="lightbox[albumname]"><img src="your_image _thumbnail_url_here">image #2</a>
<a href="your_image_url_here_3" rel="lightbox[albumname]"><img src="your_image _thumbnail_url_here">image #3</a>
<a href="your_image_url_here_2" rel="lightbox[albumname]"><img src="your_image _thumbnail_url_here">image #2</a>
<a href="your_image_url_here_3" rel="lightbox[albumname]"><img src="your_image _thumbnail_url_here">image #3</a>
Demo:
Subscribe to:
Post Comments (Atom)
9 comments:
Why my Lightbox did not work?
<a href='http://stickynoise.blogspot.com>http://stickynoise.blogspot.com</a>
@Buythecow...
Hi, I know where is your problem. Don't worry. You've installed the lightbox correcty exactly as I mentioned. The problem is in your post.
Now follow these steps:-
1. Go to Edit Post > Edit HTML > and search for the following piece of code.
<a style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" 1="" rel="lightbox[albumname] imageanchor=" href="http://2.bp.blogspot.com/_b8QgIHOxM-s/S2iA9XG-v9I/AAAAAAAAA_E/YhjmgY6Ni_U/s1600-h/decade-01.jpg"><img border="0" src="http://2.bp.blogspot.com/_b8QgIHOxM-s/S2iA9XG-v9I/AAAAAAAAA_E/YhjmgY6Ni_U/s320/decade-01.jpg"></a>
2. Problem is here in this piece of code.
href="http://2.bp.blogspot.com/_b8QgIHOxM-s/S2iA9XG-v9I/AAAAAAAAA_E/YhjmgY6Ni_U/s1600-h/decade-01.jpg"
3. Remove ( -h ) from the url.
Before removing ( s1600-h )
After removing ( s1600 )
4. Publish your post...
5. View your post and click on the image....It will work..^_^ !!
This is because the lightbox needs the original source of the image to display..read this blogger image hack/trick to understand about it....
http://introblogger.blogspot.com/2009/12/free-image-hosting-with-unlimited.html
Thank you very much!!
@buythecow...
You are welcome...Glad to see lighbox working in your page..^_^ !! You have a great looking blog..
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "script" must be terminated by the matching end-tag "
Hi Saisayan...Sorry for the problem...It seems I've missed a "/" for the closing "</script> tag of first javascript code in the box....So, it caused the problem..
I've edited the post..Thanks for your information =)
Thanks a lot brother. its working..
Is there a way to insert by default rel="lightbox" to all images?
I have the same question :
" Is there a way to insert by default rel="lightbox" to all images?"
I already have around 500 posts when I configured the lightbox feature and it's a really annoying job put it manually in all the images.
If you know a way I really would appreciate to know it!
Thanks a lot for sharing! =)
Post a Comment