Image Magnify Effect with Jquery

Image Magnify Effect with Jquery

Sometimes, it is nice to see when you click on an image and it zoom out. There are so many websites which comes with this effect.

In this simple tutorial, i will show you how you can add a cool magnify effect to the images of a website. When the user will click on the image, it will be centered on the user’s screen until dismissed.

See the demo for better understanding.

Demo and Read More

First of all add following code inside the header of the web page

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>

<script type=”text/javascript” src=”http://www.dynamicdrive.com/dynamicindex4/jquery.magnifier.js”>
</script>

Now add class=”magnify” to all those images in which you want to add this cool effect.

<img src=”deepanker.jpg” class=”magnify” style=”width:130px; height:150px” />

advertisement

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest updates, web design resources and tools.

You have Successfully Subscribed!

About The Author

    ADD YOUR COMMENT

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Receive fresh web design resources and SEO tips in your email by our weekly newsletter

You have Successfully Subscribed!