NOTICE

Adfly Links not working Find Direct Links HERE

Zoom or Magnify Image to Original Full Size On Click Using jQuery In Blogger

In the previous post there is an automatic method to show full or original image by simply hovering its thumbnail (smaller image in size and dimensions).Then image of full size appears in the tooltip and also disappears on removing cursor.

Here you can view full image or original image by clicking on its thumbnail and clicking it again to get back its thumbnail.See the demo below to see its working.



Installation:


Step 1 :

Login to Blogger >>> Go To LAYOUT >>> Then Click On Edit HTML >>> Check Mark Expand Widgets >>> Press Ctrl+F


Search For below code or similar:-

</head>

add the following code before </head>

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.js' type='text/javascript'/><link href='http://www.wallheaven.com/fullsize/fullsize.css' media='screen' rel='stylesheet' type='text/css'/> <script src='http://www.wallheaven.com/fullsize/jquery.fullsize.js' type='text/javascript'/><script type='text/javascript'>jQuery(document).ready(function(){jQuery("img").fullsize([]);});</script>

Now Use below format to add any image:

<img src="URL_SHORT_IMAGE.jpg" alt="Me" longdesc="URL_FULLSIZE_IMAGE.jpg" />

URL_SHORT_IMAGE.jpg = Paste the link of Thumbnail or small image

URL_FULLSIZE_IMAGE.jpg = Paste the link of Original or Large image which will Zoom out on click. or small image

4 comments :

  1. It works great......I applied it in my blog hollywood-stars-celebrities.blogspot.com, its veru beautiful hack.

    Thanks.

    ReplyDelete
  2. Thanks..For your Feedback on this post Subscribe to get alerts on new widgets everyday :)

    ReplyDelete
  3. Thanks for sharing it, its very helpful. I applied it in my blog http://pakuankriyawaruga.blogspot.com.


    Thanks again :)

    ReplyDelete

Feel free to leave comment if you like above widget, have any questions or just say Hi! :)