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>4, Save as Template
<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">
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!
No comments:
Post a Comment