Website Development Resources
CHouseLive

Gzoom is a neat jQuery plugin which allows you to zoom in on a picture.

Gzoom has a number of dependencies which will need to be downloaded in addition to the Gzoom script and CSS.

• jQuery Library
• jQuery User Interface, core and slider
• jQuery mousewheel

  <h3>Example 1: Simple Zoom</h3>
  <div id="simple" class="zoom">
    <img src="images/pretoria.jpg" alt="Pretoria" title="Pretoria" width="500" height="363" />
  </div>

  <h3>Example 2: Zoom with Lightbox</h3>
  <div id="lightbox" class="zoom">
    <img src="images/soccer-city.jpg" alt="soccer city" title="World Cup 2010 - Soccer City" width="500" height="333" />
  </div>

  <h3>Example 3: Zoom with Magnifier</h3>
  <div id="magnify" class="zoom">
    <img src="images/government.png" alt="Mind Map" title="Government influence on Business Activity" width="500" height="292" />
  </div>

  <div class="clear"></div>

1. Attach gzoom css

   <link rel="stylesheet" href="scripts/gzoom/css/jquery.gzoom.css" type="text/css" />

2. Attach jQuery UI

   <link rel="stylesheet" href="scripts/gzoom/css/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" />

3. Additional Styling

   .wrapper{
     margin: 0 auto;
     width: 510px;
   }
   
   .wrapper h3{
     clear:both;
     text-align:center;
     margin:0;
     padding:20px 0 5px 0;
   }
   
   .zoom{
     cursor: crosshair;
   }
   
   .clear{clear:both;}

1. Attach the JQuery library

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

   You can also download your own copy of the JQuery library.

2. Attach jQuery UI script

   <script type="text/javascript" src="scripts/gzoom/js/jquery-ui-1.7.2.custom.min.js"></script>

3. Attach mousewheel script

   <script type="text/javascript" src="scripts/gzoom/js/jquery.mousewheel.js"></script>

4. Attach Gzoom script

   <script type="text/javascript" src="scripts/gzoom/js/jquery.gzoom.js"></script>

5. Initiate Gzoom script

   <script type= "text/javascript">
     $(function() {
       $("#simple").gzoom({
         sW: 500,
         sH: 363,
         lW: 1600,
         lH: 1161,
         lighbox : false
       });
       $("#lightbox").gzoom({
         sW: 500,
         sH: 333,
         lW: 1600,
         lH: 1067,
         lightbox: true
       });
       $("#magnify").gzoom({
         sW: 500,
         sH: 292,
         lW: 2403,
         lH: 1403,
         lightbox: true,
         zoomIcon: 'scripts/gzoom/zoom-in.png'
       });
     });
   </script>

If you have encountered a problem with this demonstration, or would like an amendment made to the referencing and attributions of the scripts and code used on this page, please send the CHouseLive team an email: cara_remove_@chouselive_remove_.org