How To Add Zoom Effect for images

3

1.Log in to your dashboard–> layout- -> Edit HTML

2.Click on “Expand Widget Templates”

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag.


<script src=’http://wam8387.110mb.com/FancyZoom.js’ type=’text/javascript’/>
<script src=’http://wam8387.110mb.com/FancyZoomHTML.js’ type=’text/javascript’/>

5.Now replace the <body> tag with <body onload=’setupZoom()’>

NOTE : If in your template already has <body onload=”setupZoom()”> code instead <body> tag ,skip this step.

6.Now save your template.

You have already add zoom effect for images.But,to zoom image you have to use this new form :


<a href=”Image link”><img src=”Image link” width=”200″ border=”0″ height=”200″ />

You must replace ‘Image link’ with your real url of image.You can change Height,Weight,…..

Look at the example below.

<a href=”http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg”><img border=”0″ width=”200″ src=”http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg” height=”200″/></a>

It will look like this.click on the picture to see effect.

Read this : When you add this effect inside post if come html errors , check the box ‘Stop showing HTML errors for the body of this post’ and publish your post.Good Luck.

3 Responses

  1. Anonymous says:

    Where is yhe demo!!!!!!!!!!!!?

  2. Roschelle says:

    pretty neat trick. I had no clue this was even possible. Thanks

  3. omtiger.com says:

    can you give me sample of this effect?

Leave a Reply

 
© 2011 Latest Blogger|Blogspot Tips And Tricks. All rights reserved.
Proudly designed by Theme Junkie.