Implementing imgZoom in Blogger

imgZoom is a jQuery plugin that implements a smooth zoom effect on images. It uses vector graphics (SVG or VML) to create a graceful transition between the thumbnail and the full-sized image.

Plugin features:
>Lightbox-like interface (dark overlay, previous/next image switching)
>Highly customizable (CSS styling, custom HTML wrapper block)
>Images can be zoomed in with a fade-in effect or with rotation
>Provides API functions to zoom in and zoom out
>Lightweight — the packed version is less than 7KB

The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

             

Steps to Add it to Blogger:

1.Login to the Blogger account

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it.

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/jquery.imgzoom-0.2.1/css/imgzoom.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jquery.imgzoom-0.2.1/scripts/jquery.imgzoom.js"></script>

2.Go to the Post/Page you want to add imgZoom and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/jquery.imgzoom-0.2.1/css/imgzoom.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jquery.imgzoom-0.2.1/scripts/jquery.imgzoom.js"></script>
 

4.Now for adding the images into imgZoom ,Firstly add the image normally using Insert Image Button


Now When you see the codein the edit HTML window it would be something like this

<a href="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a>

Make it like this 

<a class="img" href="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a>

As you see we only added class="img" .Now add the following javascript snippet to link the two.

<script type="text/javascript"> 
 $(function () {
     $('#img').imgZoom({ showOverlay: true });
 });
</script> 

ImgZoom provides many options for customizing the javascript ,Here is a list of them:

Option	Description
classPrefix	A string that is prepended to class names assigned to plugin elements default: "imgzoom"
duration	The duration of the zoom in/zoom out animation (in milliseconds). default: 500
fastSwitch	If set to true, switching to the previous/next image happens without the zoom out/zoom in animation. default: false
hideThumbnail	If set to true, the thumbnail image turns invisible when animation starts. default: false
instance	If set to true, the imgZoom() call returns a reference to an instance of imgZoom bound to the image, allowing you to use its API methods.
loadingImg	The URL of the image used as a "loading" icon, displayed on top of the thumbnail when the full-sized image is loading. default: "css/imgzoom-loading.gif"
opacity	If set to a number between 0 and 1, the image's opacity is gradually increased starting with the given value and ending with 1, producing a fade-in effect. If set to an array of two numbers, the numbers correspond to the starting and ending opacity. default: 1
overlayOpacity	The opacity of the overlay (visible when showOverlay is true). default: 0.75
rotate	If set to true, the image does a 360° clockwise rotation while zooming in. If set to a positive integer greater than 1, it defines the number of rotations. If set to a negative integer, the image is rotated counter-clockwise. default: false
showOverlay	If set to true, a semi-transparent black overlay is displayed in the background of the full-size image. default: false
src	URL of the full-size image, if it's not referenced by the parent's href attribute.
title	Image title that will be displayed in the wrap. If not specified, the plugin reads it from the title attribute of the anchor element containing the image, or the title of the image element itself.
wrap	A block of HTML code that will be wrapped around the full-size image.
wrapDuration	The duration of the wrap fade-in animation (in milliseconds). default: 300

Here is a customized javascript call :

<script type="text/javascript"> 
 $(function () {
     $('#img3').imgZoom({ showOverlay: true, rotate: true, duration: 1000 });
 });
</script> 

This options tells the image to do a 360 degree before appearing in the lightbox.The image will explain it a little.

5.Now save the Post/Page.




Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!




Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.