Implementing JqZoom Evolution in Blogger

JqZoom allows the user to inspect an image with a small magnifier window

It can be modified to display a mask over the image or not to show an magnifier window.

This jQuery plugin helps to embed detailed big images in any website.

The script can be applied to single or multiple images on the same webpage.

             


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/JqZoom/css/jquery.jqzoom.css" rel="stylesheet" type="text/css"></link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
</script>  
<script src="http://dl.dropbox.com/u/27675057/JqZoom/js/jquery.jqzoom-core.js" type="text/javascript">
</script>

<script type="text/javascript">
 
  jQuery(document).ready(function(){
 
       jQuery('a#NAMEOFYOURCHOICE').jqzoom();
 
  });
 
  
</script>

2.Go to the Post/Page you want to add JqZoom Evolution and then go to Edit HTML tab .


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


<link href="http://dl.dropbox.com/u/27675057/JqZoom/css/jquery.jqzoom.css" rel="stylesheet" type="text/css"></link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
</script>  
<script src="http://dl.dropbox.com/u/27675057/JqZoom/js/jquery.jqzoom-core.js" type="text/javascript">
</script>

<script type="text/javascript">
 
  jQuery(document).ready(function(){
 
       jQuery('a#NAMEOFYOURCHOICE').jqzoom();
 
  });
 
  
</script>

4.Now for adding the images into JqZoom Evolution ,Firstly add the image normally using Insert Image Button




Now When you see the code in the edit HTML window 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 id=’NAMEOFYOURCHOICE’ href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>

Make sure that the id tag matches with that declared in the snippet 


JqZoom Evolution provides for various options Here is a list of them:

Here are some customized javascript snippets for using various options:

<script type="text/javascript">
 
  jQuery(document).ready(function(){
 
/*Standard Zoom*/
       jQuery('a#demo1').jqzoom();
 
 /*Reverse Zoom*/
                jQuery('a#demo2').jqzoom({
    zoomType: 'reverse'
         });
 
 /*Drag Zoom*/
                jQuery('a#demo3').jqzoom({
             zoomType: 'drag'
         });
 
 /*Inner Zoom*/
                jQuery('a#demo4').jqzoom({
             zoomType: 'innerzoom'
         });
 
 /*Always Zoom*/
                jQuery('a#demo5').jqzoom({
             zoomType: 'standard',
                    alwaysOn : true
         });
 
 /*Customized Zoom*/
                jQuery('a#demo6').jqzoom({
             zoomType: 'standard',
                    alwaysOn : false,
                    zoomWidth: 250,
                    zoomHeight:200,
                    position:'left',
                    xOffset: 30,
                    yOffset:80,
                    showEffect : 'fadein',
                    hideEffect: 'fadeout'
         });
 
 
  });
 
  
</script> 

5.Now save the Post/Page.






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






Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.

             

Implementing Featured Image Zoomer in Blogger

Featured Image Zoomer lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It’s great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.

 Here are the script’s features:

Ability to specify either the original image or a larger version of it as the “magnified” image.
The “magnified” image is only loaded on demand (the first time the user moves his mouse over the thumbnail image), saving on initial page download time.
Supports an optional adjustable power setting. When enabled, the user can adjust the zoom level on demand by using the mouse wheel while over the image.

             
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.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/FeaturedImageZoomer/featuredimagezoomer.js">
</script>

Now search for the ]]></b:skin> tag and paste the following code just Above/Before it.

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

Now search for the </body> tag and paste the following code just Above/Before it.

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#Anyname').addimagezoom()

})

</script>

2.Go to the Post/Page you want to add Featured Image Zoomer and then go to Edit HTML tab .


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

<style type="text/css">

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/FeaturedImageZoomer/featuredimagezoomer.js">
</script>

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#image3').addimagezoom()

})

</script>

4.Now for adding the images into Featured Image Zoomer ,Firstly add the image normally using Insert Image button

Now When you see the code in the edit HTML window 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 id=”Anyname” href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>


As you see we only added a id tag “Anyname”



Now add a javascript snippet

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#Anyname').addimagezoom()

})

</script>

This is the most basic call ,Featured Image Zoom provides with many Options to customize the Zoom effect .Here are some of the Options: 



Here are some example snippet codes:

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#image1').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [300,300],
  magnifierpos: 'right',
  cursorshade: true,
  largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
 })
 
 $('#image2').addimagezoom({
  zoomrange: [5, 5],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  cursorshade: true,
  cursorshadecolor: 'pink',
  cursorshadeopacity: 0.3,
  cursorshadeborder: '1px solid red',
  largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
 })

 $('#image3').addimagezoom()

})

</script>


5.Now save the Post/Page and see the magic.

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

             

Implementing Easy Zoom in Blogger

Easy Zoom is a lightweight & highly customizable jQuery plugin that will allow users to see larger details of the image while moving cursor over medium sized image.

             
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. 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Easy%20Image%20Zoom/easyzoom.js"></script>
<link href="http://dl.dropbox.com/u/27675057/Easy%20Image%20Zoom/default.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
jQuery(function($){
$('a.zoom').easyZoom();
});
</script>

Now search for the ]]></b:skin> tag and paste the following code just Above/Before it.

/* Edit width, height and placement of the dynamically created image zoom box. */

#easy_zoom{
width:600px;
height:400px; 
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:50px;
left:700px;
overflow:hidden;
-moz-box-shadow:0 0 10px #777;
-webkit-box-shadow:0 0 10px #777;
box-shadow:0 0 10px #777;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}


2.Go to the Post/Page you want to add the Easy Zoom and go to Edit HTML tab .


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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Easy%20Image%20Zoom/easyzoom.js"></script>
<link href="http://dl.dropbox.com/u/27675057/Easy%20Image%20Zoom/default.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
jQuery(function($){
$('a.zoom').easyZoom();
});
</script>
<style>

/* Edit width, height and placement of the dynamically created image zoom box. */

#easy_zoom{
width:600px;
height:400px; 
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:50px;
left:700px;
overflow:hidden;
-moz-box-shadow:0 0 10px #777;
-webkit-box-shadow:0 0 10px #777;
box-shadow:0 0 10px #777;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

</style>

4.Now for adding the images into Easy 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 href=” ” class=”zoom” ><img src=” ” /></a>

As you can see we added only a class=”zoom”.

5.Now save the Post/Page and see the magic.

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

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:


Parameter Description (from V1.0.0) Default Value
zoomWidth The width of the zoom window in pixels. If ‘auto’ is specified, the width will be the same as the small image. ‘auto’
zoomHeight The height of the zoom window in pixels. If ‘auto’ is specified, the height will be the same as the small image. ‘auto’
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’ ‘right’
adjustX Allows you to fine tune the x-position of the zoom window in pixels. 0
adjustY Allows you to fine tune the y-position of the zoom window in pixels. 0
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. false
tintOpacity Opacity of the tint, where 0 is fully transparent, and 1 is fully opaque. 0.5
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. 0.5
softFocus Applies a subtle blur effect to the small image. Set to true or false. Does not work with tint. false
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. 3
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. 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 !