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

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="" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></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="" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></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 });

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

classPrefixA string that is prepended to class names assigned to plugin elements
default: "imgzoom"
durationThe duration of the zoom in/zoom out animation (in milliseconds).
default: 500
fastSwitchIf set to true, switching to the previous/next image happens without the zoom out/zoom in animation.
default: false
hideThumbnailIf set to true, the thumbnail image turns invisible when animation starts.
default: false
instanceIf 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.
loadingImgThe 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"
opacityIf 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
overlayOpacityThe opacity of the overlay (visible when showOverlay is true).
default: 0.75
rotateIf 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
showOverlayIf set to true, a semi-transparent black overlay is displayed in the background of the full-size image.
default: false
srcURL of the full-size image, if it's not referenced by the parent's href attribute.
titleImage 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.
wrapA block of HTML code that will be wrapped around the full-size image.
wrapDurationThe 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 });

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.


Post a Comment

© 2009 Blogger Tips 2013 | Powered by Blogger