How To Add Featured Image Zoomer For Blogger

This script 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.






How To Add Featured Image Zoomer For Blogger

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag.

<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 src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script src='https://sites.google.com/site/bloggertricksandtoolz/featuredimagezoomer.js' type='text/javascript'>
/***********************************************
* Featured Image Zoomer (w/ adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Bloggerized by - Sameera- http://www.bloggertricksandtoolz.com/
***********************************************/
</script>

5.Click "Save template"

6.Now Go Dashboard and Desing --> Page Elements.

7.Click on 'Add a Gadget' on the sidebar.

8.Select 'HTML/Javascript' and add the one of code given below

<script type="text/javascript">

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

 $('#image1').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [300,400],
  magnifierpos: 'right',
  largeimage: 'Your image url 1' //<-- No comma after last option!
 })
 
 $('#image2').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  largeimage: 'Your image url 2' //<-- No comma after last option!
 })

 $('#image3').addimagezoom()
                zoomrange: [3, 10],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  largeimage: 'Your image url 3' //<-- No comma after last option!
        })

</script>

<p><img id="image1" border="0" src="Your image url 1" style="width:300px;height:225px" /><p>

<p><img id="image2" border="0" src="Your image url 2" style="width:300px;height:225px" /><p>

<p><img id="image3" border="0" src="Your image url 3" style="width:300px;height:225px" /><p></p></p></p></p></p></p>

Note: Replace Your image url with your image url.| width:300px;height:225px chagne Zoomer image sizes as you like..

Look at the example below:

<script type="text/javascript">

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

 $('#image1').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [300,300],
  magnifierpos: 'right',
  largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
 })
 
 $('#image2').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [300,300],
  magnifierpos: 'right',
  largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
 })

 $('#image3').addimagezoom()
            zoomrange: [3, 10],
  magnifiersize: [300,300],
  magnifierpos: 'right',
  largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
})

</script>

<p><img id="image1" border="0" src="http://i44.tinypic.com/9ie1ib.jpg" style="width:300px;height:225px" /><p>

<p><img id="image2" border="0" src="http://i44.tinypic.com/9ie1ib.jpg" style="width:300px;height:225px" /><p>

<p><img id="image3" border="0" src="http://i44.tinypic.com/11icnk5.jpg" style="width:300px;height:225px" /><p>

7.Now save your "Html Java scrpit" You are done.

Cheers.