Sunday, December 5, 2010

Show images on Blogger with jQuery plugin: LightBox

LightBox is a powerful library for viewing images on the web written in JavaScript. You can easily integrate LightBox into Blogger as following steps:

1, Download the Javascript and CSS files as aforementioned link.
2, Upload those code to somewhere website supported link (Google pages is a good choice because you suppose to write blog with Blogger)
3, Go to "Edit HTML Template" in your Blogger then add the following code in head
<link href="https://sites.google.com/site/xuvifblog/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"></link>
<link href="https://sites.google.com/site/xuvifblog/SyntaxHighlighter.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/xuvifblog/jquery.lightbox-0.5.min.js">
4, Save as Template
5, Write your blog as this example
<div id="gallery">
<a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg">
<img height="50px" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" width="50px" /></a> <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg">
<img height="50px" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg" width="50px" /></a>
</div>
<script type="text/javascript">
    $(function() {
       $('#gallery a').lightBox({fixedNavigation:true});
    });
</script>

Enjoy!


3 comments: