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.

VIEW DEMO

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