How to add zoomy.js to blogger

Zoomy.js is a Prototype class that allows you to easily create image gallery: the script make simple magnification of images with customizable options, as popup and overlaying boxes.Zoomy is an alternative to lightbox.

Today i am to teach how to implement zoomy.js script to blogspot users to create a zoomy effect to theirs images in posts.Demo in blogger
Step1

Download the files from Here

and host it to your hosting(i prefer dropbox)

Step2

goto->design->edit html and paste the below code above </head>

<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/13256471/zoomy/js/scriptaculous.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/13256471/zoomy/js/zoomy.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/13256471/zoomy/js/effects.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/13256471/zoomy/js/dragdrop.js" type="text/javascript">
</script>

Step3
create a gallery using the bellow code in your post or pages

<ul class="zoomy">
<li>
<a href="images/firefox-big.jpg" title="Firefox"><img src="images/firefox.jpg" alt="Firefox" /></a>
</li>
<li>
<a href="images/opera-big.jpg" title="Opera"><img src="images/opera.jpg" alt="Opera" /></a>
</li>
<li><a href="images/safari-big.jpg" title="Safari" ><img src="images/safari.jpg" alt="Safari" /></a>
</li>
<li><a href="images/prototype-big.jpg" title="Prototype Framework" ><img src="images/prototype.jpg" alt="Prototype Framework" /></a>
</li>
</ul>

then call the script to get zoomy effect in action

<script type="text/javascript">
Event.observe(window,"load",function() {

       $$("ul.zoomy a").each(function(element){

        new Zoomy(element, { hideCaption: true });     

       });

</script>

if you want a draggable effect then use the below code

<script type="text/javascript">
Event.observe(window,"load",function() {

      

    $$("ul.zoomy a").each(function(element){

        new Zoomy(element, { draggable: true });     

       });

    });
</script>