Attention: We have retired the ASP.NET Community Blogs. Learn more >

Looking into the JQuery Image Zoom Plugin

I have been using JQuery for a couple of years now and it has helped me to solve many problems on the client side of web development. 

You can find all my posts about JQuery in this link. In this post I will be providing you with a hands-on example on the JQuery Image Zoom Plugin.If you want you can have a look at this post, where I describe the JQuery Cycle Plugin.You can find another post of mine talking about the JQuery Carousel Lite Plugin here.

I will be writing more posts regarding the most commonly used JQuery Plugins.

I have been using extensively this plugin in my websites.You can use this plugin to move mouse around an image and see a zoomed in version of a portion of it.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.

You can use Visual Studio 2012 Express edition. You can download it here. 

You can download this plugin from this link

I launch Expression Web 4.0 and then I type the following HTML markup (I am using HTML 5)


<html lang="en">
  <head>
    <title>Liverpool Legends</title>
   
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
   
    <link rel="stylesheet" type="text/css" href="style.css">
   
    <script type="text/javascript" src="jquery-1.8.3.min.js"> </script>
     <script type="text/javascript" src="jqzoom.pack.1.0.1.js"></script>
     
   <script type="text/javascript">
        $(function () {
            $(".nicezoom").jqzoom();
        });
    </script>
    
  </head>
  <body>
    <header>
        <h1>Liverpool Legends</h1>

    </header>
   
    <div id="main">
   
 
 
      <a href="championsofeurope-large.jpg" class="nicezoom" title="Champions">
        <img src="championsofeurope.jpg"  title="Champions">
    </a>

     
    </div>
   
   
    <footer>
   
    <p>All Rights Reserved</p>
 
    </footer>
  
  </body>
 
</html>

 

This is a very simple markup. I have added one large and one small image (make sure you use your own when trying this example)

I have added references to the JQuery library (current version is 1.8.3) and the JQuery Image Zoom Plugin. Then I add 2 images in the main div element.Note the class nicezoom inside the href element.

The Javascript code that makes it all happen follows. 

   <script type="text/javascript">
        $(function () {
            $(".nicezoom").jqzoom();
        });
    </script>
    

It couldn't be any simpler than that. I view my simple in Internet Explorer 10 and it works as expected.

I have tested this simple solution in all major browsers and it works fine.

Have a look at the picture below.When I place the mouse over the leftmost picture, the zoomed in version of it is shown in the larger image on the right.

zoom 

Inside the head section we can add another Javascript script utilising some more options regarding the zoom plugin.

   <script type="text/javascript">
  
  
      $(function () {
        var options = { 
                zoomType: 'standard', 
                lens:true, 
                preloadImages: true, 
                alwaysOn:false, 
                zoomWidth: 400, 
                zoomHeight: 350, 
                xOffset:190, 
                yOffset:80, 
                position:'right' 
               
        }; 
        $('.nicezoom').jqzoom(options); 
    }); 
  
    </script>

I would like to explain briefly what some of those options mean.

  • zoomType - Other admitted option values are 'reverse','drag','innerzoom'
  • zoomWidth - The popup window width showing the zoomed area
  • zoomHeight - The popup window height showing the zoomed area
  • xOffset - The popup window x offset from the small image. 
  • yOffset - The popup window y offset from the small image. 
  • position - The popup window position.Admitted values:'right' ,'left' ,'top' ,'bottom'
  • preloadImages - if set to true,jqzoom will preload large images.

You can test it yourself and see the results in your favorite browser.

Hope it helps!!!

1 Comment

Comments have been disabled for this content.