Website Development Resources
CHouseLive

jqZoom is a brilliant little JQuery script that allows you to apply a magnification to highly detailed images.

To use this script you will need to visit the following sites and download the relevant files:

• jqZoom
• jQuery Library

<div class="img-desc">
  <a href="images/nile-crocodile.jpg" class="zoom" title="Nile Crocodile">
    <img src="images/nile-crocodile-small.jpg" alt="Nile Crocodile" />
    <cite>Nile Crocodile</cite>
  </a>
</div>

1. Attach jqZoom css file

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

2. Additonal styles

   .img-desc{
     position: relative;
     display: block;
     height:207px;
     width: 300px;
     border: 5px solid #000;
   }
   
   .img-desc img{
     border:none;
     padding:none;
     margin:none;
   }
   
   .img-desc cite {
     background: #111;
     -moz-opacity:.55;
     filter:alpha(opacity=55);
     opacity:.55;
     color: #fff;
     font-size: .95em;
     text-align: right;
     position: absolute;
     bottom: 0;
     left: 0;
     width: 290px;
     padding: 5px;
     border-top: 1px solid #999;
     font-style: normal;
   }

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 jqZoom script

   <script type='text/javascript' src="scripts/jqzoom/js/jqzoom.pack.1.0.1.js"></script>

3. Initiate jqZoom

   <script type="text/javascript">
   $(document).ready(function(){
     var options = {
       zoomWidth: 300,
       zoomHeight: 207,
       xOffset: 10,
       yOffset: -5,
       showEffect: 'fadein',
       fadeinSpeed: 'slow',
       hideEffect: 'fadeout',
       zoomType:'reverse',
       position: 'right'
   };
     $('.zoom').jqzoom(options);
   });
   </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