Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Don't know about you guys but i think Lightbox are the best widget ever made.....i really like Light Boxes and today i'am sharing one of it with you.....
Installing :
- Go To Blogger > Template > Edit HTML
- Just above </head> paste the script given below
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/FancyZoom.js"></script>
And you're done.....
How To Use :
$('#id').fancyZoom() where id is the id of the <a> tag you would like to zoom. The <a> tag should have an href that anchors to the id of the box that contains the contents that should be zoomed. For example:
<a href="#small_box" id="small">Small Box!</a>
<div id="small_box">
<p>Here is the contents that will appear in the zoom.</p>
</div>
<script type="text/javascript">
$('#small').fancyZoom();
</script>
Other Examples
// other examples
<script type="text/javascript">
$(document).ready(function() {
$('a.fancy').each(function() { $(this).fancyZoom({width:500, height:300});});
$('#small').fancyZoom({scaleImg: true}); // Scales images inside while zooming
$('#medium').fancyZoom({closeOnClick: true}); // Close the zoom by clicking on the contents
// width and height are optional. defaults to css specifications of width and height.
// if width and height are passed in, they override whatever may be in css.
$('#large').fancyZoom({width:600, height:400});
});
</script>
You can use this lightbox in Images , HTML , Text , Flash and Embed-able stuff.....Having problem or want a pet Unicorn then comment.....
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
