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="" media="screen" rel="stylesheet" type="text/css"></link>
<link href="" media="screen" rel="stylesheet" type="text/css"></link>
<script src="" type="text/javascript"></script>
<script src="">
4, Save as Template
5, Write your blog as this example
<div id="gallery">
<a href="">
<img height="50px" src="" width="50px" /></a> <a href="">
<img height="50px" src="" width="50px" /></a>
<script type="text/javascript">
    $(function() {
       $('#gallery a').lightBox({fixedNavigation:true});