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.
