loading...

Friday, February 11, 2011

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>

5 comments:

  1. I'm not quite there...
    I'm hosting the files from dropbox just like you. I've dropped the code into the Edit section in Design above 'head'
    And I've added the gallery code into my post with my own images and copied the draggable code below it.
    But the image doesn't view when I preview or publish the page!!
    Any thoughts??
    any help would be very appreciated...

    ReplyDelete
  2. you should have two images one is the image thumbnail which will be your src for your <img> tag
    and the big image location should be added to href of <a> tag ........just look at the code in step 3 that <a> tag has firefox-big.jpg as src and <img> tag has firefox.jpg which is the thumbnail ......

    ReplyDelete
  3. Thanks but still no success...

    I have two versions of my image for src and href but they still fail to load. I even tried to use your original images but they fail aswell.

    Should the draggable effect code directly follow the gallery code in my post?

    ReplyDelete
  4. ok one last try

    give the full path for the css style sheet in the link tag.....

    ReplyDelete

fuzionpro Headline

fuzionpro