image zooming
 Sometime ,we need a bigger and detailed version of an image ,but size of image is limited by post frame . So we can do a zoom function for image . For example ,you have a blog that selling children apparel . Because of the limitation of post frame ,if we add a big image ,it will break out the layout .If we add a small size image ,it's hard for buyer to see product in detail . It's time for zooming function .

Download


Installing this script is not different to lightbox effect .

Now let's start

1,Download the script files and upload to your hosting . This step is required because I have no hosting in hand now .

2,Now add these line bellow before <body>

<link href="/styles/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 type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>

3,How to use
In blog posting window ,after inserting image ,click on edit HTML ,and edit the HTML code of image to this form
<a href="bigimage.jpg" class="cloud-zoom" rel="option goes here .........">
<img src="smallimage.jpg" title="Optional title display" >
</a>
Bigimage.JPG is the big and detail version of image
Smallimage.JPG is the small version of image
Class 'cloud-zoom' is required .


4,If your blog has a line for calling jquery framework ,do not add more
<script type='text/javascript' src='js/jquery.js'></script>
because more than one jquery calling can make all script stop .

5,Options can be set by adding into rel attribute . I marked where to put option by the text "option go here" in the step 3 . Each option is separated by a comma ( , ) .

Here is the list of options 

  • zoomWidth : The width of the zoom window in pixels. If 'auto' is specified, the width will be the same as the small image .
  • zoomHeight : The height of the zoom window in pixels. If 'auto' is specified, the height will be the same as the small image.
  • position : Specifies 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'
  • adjustX : Allows you to fine tune the x-position of the zoom window in pixels.
  • adjustY :  Allows you to fine tune the y-position of the zoom window in pixels.
  • tint Specifies a tint colour which will cover the small image. Colours should be specified in hex format, e.g. '#aa00aa'. Does not work with softFocus.
  • tintOpacity :  Opacity of the tint, where 0 is fully transparent, and 1 is fully opaque .
  • lensOpacity :  Opacity 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.
  • softFocus : Applies a subtle blur effect to the small image. Set to true or false. Does not work with tint.
  • smoothMove : Amount 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.
  • showTitle : Shows the title tag of the image. True or false. true
  • titleOpacity : Specifies the opacity of the title if displayed, where 0 is fully transparent, and 1 is fully opaque. 
That's all for zooming . I hope it helpful to you . 

    Share this post

    Advertisement

    16 comments

    1. Gr8 work again......keep it up
      Plz tell me any software for local testing of blogger template..

      ReplyDelete
    2. @Ravinder Mehta : there's no software for testing blogger template offline . At this time ,I know only Blogger for testing . Register a blog and test .

      ReplyDelete
    3. Very Nice dear..very long time ago u had post ur experience.which are the helpfull and learnable for us..
      its not Working In Blogger...www.Shaan-Ali.blogspot.com
      tell me the Right way to work this tutorial in bLogger

      ReplyDelete
    4. Xin cho hỏi themes blognews bị hình nền hết hạn sử dụng mình phải làm sao, tác giả post hình này hình như acount bị hết hạn thì phải, xin chỉ giúp.
      http://www.dacsanmientrung.com/

      cảm ơn nhiều!

      ReplyDelete
    5. Admin@: Theo tôi biết, đây là lỗi gặp phải khi post ảnh lên imagshack.us.
      Bạn thử khắc phục theo cách này xem:
      ví dụ: Link gốc ảnh có dạng : http://img123.imageshack.us/....thi sửa nó thành như sau: http://a.imageshack.us/.... (thay img123 = a)
      Sau đó save theme và xem kết quả.

      ReplyDelete
    6. Bạn vào download các file ảnh đó về và upload lên host của bạn mà xài.

      ReplyDelete
    7. admin@: Bạn thử làm theo cách này: mở template ra và tìm link gốc ảnh là: http://img123.imageshack.us/...
      sửa thành: http://a.imageshack.us/... (thay img123 = a)
      sau đó save lại và xem kết quả!

      ReplyDelete
    8. It's great if this is also a build-in option like lightbox in blogger ;)

      ReplyDelete
    9. @Contributor Tt : If you want a build-in option ,ask Blogger team ^^ I can make script but can't integrate it to blogger as an option .

      ReplyDelete
    10. LOL. Yes, I got to their wish list, and suggested your feature ;)

      Anyway, I am using WLW to post to blog but recently I can see the pictures paste in will link to even small picture source. Let's say we paste in 1200x800px picture, use WLW to resize, isn't it supposed to link to 1200x800 as original?

      Real example can bee see here In Time

      The original cover must be bigger than the one displayed, but it turns out blogger auto resize it to small file though you choose link to original in Windows Live Writer option.

      Any break through for this?

      ReplyDelete
    11. @Contributor Tt : I really don't understand your question quite well ,but blogger automatically resize all images uploaded to post to fixed size (320 ,640 ..)

      ReplyDelete
    12. :) Sorry I am bad at explaining.

      It would be great if you are also using WLW? Before when I pasted in a big image let's say 800x600, the blogger will make 2 versions - one used as a thumbnail (320x...) and the other used as the original (800x600) linked from the thumbnail.

      But recently, it doesn't link to 800x600, but link to a small size image around 512px... only.

      Pic: http://snpr.cm/Do0GzY.jpg

      As you can see, the link original image should be bigger or the same size as the thumbnail image shown in the post, but it turns out smaller!

      ReplyDelete
    13. Cool tutorial man :)
      Keep it up.

      ReplyDelete
    14. Wow,...this is so wonderful plug in...
      Thanks
      Blackberry Error Solution

      ReplyDelete

    Here are some rules for commenting on Simplex Design blog :
    1, Search first ,then ask question. You will get the answer faster
    2, All comments except spams are welcome.
    3, Please make all requests in English.
    4, Do not use generic titles such as Admin or Mod. This confuses readers