Implementing Cloud Zoom in Blogger



Cloud Zoom is a lightweight, highly customizable jQuery plugin that allows you to add image zooming in your web pages. You can use this plugin to create zoomable images with different features such as tint effect, inner zoom and soft focus. It is a cross browser plugin that works in all major web browsers including IE6.

Cloud Zoom is very easy to implement and is very well documented. You can easily customize the appearance of the smaller image, lens and zoom window using CSS. It offers several configuration options enabling you to customize its behavior including: height, width & positions of zoom window; tint; opacity; amount of smoothness/drift of the zoom image as it moves; enable or disable titles.




             


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 href="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/cloud-zoom.css" rel="stylesheet" type="text/css" />   
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>   
 <script src="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/cloud-zoom.1.0.2.js" type="text/JavaScript">  
 </script>

2.Go to the Post/Page you want to add the Cloud Zoom 

Now go to Edit HTML tab .


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


<link href="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/cloud-zoom.css" rel="stylesheet" type="text/css" />   
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>   
 <script src="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/cloud-zoom.1.0.2.js" type="text/JavaScript">  
 </script> 

4.Now for adding the elements,for example you have to add image into Cloud Zoom,Firstly add the image normally using Insert Image button


Now When you see the code in the edit HTMLwindow 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="cloud-zoom" href="large.jpg" id="zoom1" rel="adjustX: 10, adjustY:-4, softFocus:true"><img align="left" alt="" src="small3.jpg" /></a>


As you can see we added only a class="cloud-zoom" and add a id tag for adding gallery files.
For multiple images together add the following code after the above code




<a class="cloud-zoom-gallery" href="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/20.jpg" rel="useZoom: 'zoom1', smallImage: 'http://dl.dropbox.com/u/27675057/Cloud%20Zoom/20%20%283%29.jpg' " title="Thumbnail 1"> 
<img alt="Thumbnail 1" src="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/20%20%282%29.jpg" /></a>


<a class="cloud-zoom-gallery" href="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/74.jpg" rel="useZoom: 'zoom1', smallImage: 'http://dl.dropbox.com/u/27675057/Cloud%20Zoom/74%20%283%29.jpg' " title="Thumbnail 2"><img alt="Thumbnail 2" src="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/74%20%282%29.jpg" /></a>



Here is a list of parameters and there description included in main JavaScript file of Cloud Zoom:



ParameterDescription (from V1.0.0)Default Value
zoomWidthThe width of the zoom window in pixels. If 'auto' is specified, the width will be the same as the small image.'auto'
zoomHeightThe height of the zoom window in pixels. If 'auto' is specified, the height will be the same as the small image.'auto'
positionSpecifies the position of the zoom window relative to the small image. Allowable values are 'left', 'right', 'top', 'bottom', 'inside' or you can specifiy the id of an html element to place the zoom window in e.g. position: 'element1''right'
adjustXAllows you to fine tune the x-position of the zoom window in pixels.0
adjustYAllows you to fine tune the y-position of the zoom window in pixels.0
tintSpecifies a tint colour which will cover the small image. Colours should be specified in hex format, e.g. '#aa00aa'. Does not work with softFocus.false
tintOpacityOpacity of the tint, where 0 is fully transparent, and 1 is fully opaque.0.5
lensOpacityOpacity of the lens mouse pointer, where 0 is fully transparent, and 1 is fully opaque. In tint and soft-focus modes, it will always be transparent.0.5
softFocusApplies a subtle blur effect to the small image. Set to true or false. Does not work with tint.false
smoothMoveAmount of smoothness/drift of the zoom image as it moves. The higher the number, the smoother/more drifty the movement will be. 1 = no smoothing.3
showTitleShows the title tag of the image. True or false.true
titleOpacitySpecifies the opacity of the title if displayed, where 0 is fully transparent, and 1 is fully opaque.0.5

5.Now save the Post/Page andsee the magic.


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



Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Anonymous said...

niec blog.........i was looking for these tips......thanxs for posting........

Rose said...

Hi Parayg,
I tried your tutorial and it did work perfectly. Thank you.
But only recently I found out that it doesn't work. Could be because of the dropbox file?

Rose said...

*Prayag

Rose said...

By the way, here's my test blog
http://hd-blogshoppremium.blogspot.com/2012/06/ipsum-1.html

Thanks in advance!

Anonymous said...

Thank you so much:)

Hello:

I implemented what you say with Cloud-Zoom, however it does not work.

Just show me the picture large but make it zoom. Here I attached my html to see if pudes give me a help please:

<div class="product_image">
<a class = "cloud-zoom 'title = "Thumbnail 1 '
rel = "useZoom: 'out1', adjustY: -4, adjustX: 25, zoomHeight: 300, zoomWidth: 200, smoothMove: 2, smallImage: 'http://4.bp.blogspot.com/-rpmmQaj9rek/UmplCc- TFNI/AAAAAAAACEU/pomAekYAcbU/s1600/Giselle_Big.jpg '">
<img alt = "Thumbnail 1" /> </ a>
</ div>
My blog is: qtdpremama.blogspot.com

thanks

oh friend,, absolutely, thanks so much, its very very useful for me coz i want to put its in my template,,