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
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
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.
Some readers asked me for a blogger version of Linepress template (from Gabfire) . After a long time ,now I want to show you the result . It's good for a magazine or news portal . Hope you all like this .
Live Demo | Download
2,Open the template file in any word editor . I recommend Notepad ++ for easy in editing .
3,To add social network account
Find this code :
<div id="submenu">
<ul class="subnav">
<li><a title="Subscribe to latest posts in RSS" rel="nofollow" href="/feeds/posts/default" class="gab_rss" target="_blank">RSS for Entries</a></li>
<li><a title="Subscribe to latest posts via email" rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=simplex" class="gab_email" target="_blank">Subscribe via E-mail</a></li>
<li><a title="follow on twitter" rel="nofollow" href="http://www.twitter.com/dinhquanghuy" class="gab_twitter" target="_blank">Follow on Twitter</a></li>
<li><a title="Connect on facebook" rel="nofollow" href="http://www.facebook.com/simplexdesignblog" class="gab_facebook" target="_blank">Connect on Facebook</a></li>
and change the link in bold to your social network and feed burner accounts .
4,Save template and upload to blogger .
5,Go to page elements .
6,To add logo
click on logo widget
and add your logo into widget content as structure
like picture bellow
7,To add item to main menu navigation
click on 'menunav' widget
add link to your categories
8,To add content in 'teaser' section
click on teaser widget
add the category name into widget content
Do the same for 'teaser','featureright','mediabar','primarybottomleft' widget
9,To add content in the tab
click on each widgets from 'priBottab1','priBottab2','priBottab3','priBotab4'
add the category name into widget content ,add the name of category into widget title.
10,Other widgets can be edit as you want . You can add script into widget content (ads ,video embed ...)
11,You can add or remove or move widgets in anyplace as you want .
Save changes . That's all for this template .
I hope this template work fine for you .
Live Demo | Download
How to install this template
1,Download the template .2,Open the template file in any word editor . I recommend Notepad ++ for easy in editing .
3,To add social network account
Find this code :
<div id="submenu">
<ul class="subnav">
<li><a title="Subscribe to latest posts in RSS" rel="nofollow" href="/feeds/posts/default" class="gab_rss" target="_blank">RSS for Entries</a></li>
<li><a title="Subscribe to latest posts via email" rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=simplex" class="gab_email" target="_blank">Subscribe via E-mail</a></li>
<li><a title="follow on twitter" rel="nofollow" href="http://www.twitter.com/dinhquanghuy" class="gab_twitter" target="_blank">Follow on Twitter</a></li>
<li><a title="Connect on facebook" rel="nofollow" href="http://www.facebook.com/simplexdesignblog" class="gab_facebook" target="_blank">Connect on Facebook</a></li>
and change the link in bold to your social network and feed burner accounts .
4,Save template and upload to blogger .
5,Go to page elements .
6,To add logo
click on logo widget
and add your logo into widget content as structure
<img src="your logo url"/>
like picture bellow
7,To add item to main menu navigation
click on 'menunav' widget
add link to your categories
8,To add content in 'teaser' section
click on teaser widget
add the category name into widget content
Do the same for 'teaser','featureright','mediabar','primarybottomleft' widget
9,To add content in the tab
click on each widgets from 'priBottab1','priBottab2','priBottab3','priBotab4'
add the category name into widget content ,add the name of category into widget title.
10,Other widgets can be edit as you want . You can add script into widget content (ads ,video embed ...)
11,You can add or remove or move widgets in anyplace as you want .
Save changes . That's all for this template .
I hope this template work fine for you .
