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 .........">Bigimage.JPG is the big and detail version of image
<img src="smallimage.jpg" title="Optional title display" >
</a>
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.
nice man
ReplyDeleteGr8 work again......keep it up
ReplyDeletePlz tell me any software for local testing of blogger template..
Very Nice dear..very long time ago u had post ur experience.which are the helpfull and learnable for us..
ReplyDeleteits not Working In Blogger...www.Shaan-Ali.blogspot.com
tell me the Right way to work this tutorial in bLogger
It's great if this is also a build-in option like lightbox in blogger ;)
ReplyDelete@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@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:) Sorry I am bad at explaining.
ReplyDeleteIt 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!