18 Jun 2011
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.

For Multiple Usage
For Single Usage

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 !

Til next time,
Prayag Verma at 18:11

scribble

18 Jun 2011 Implementing Featured Image Zoomer in Blogger

18 Jun 2011
Implementing Featured Image Zoomer in Blogger