title: HTML zoom & lightbox
body: <p>i would zooming and showing image witn lightbox.</p>
  
  <p>Example is in this link : </p>
  
  <p><a href="http://www.elevateweb.co.uk/image-zoom/examples" rel="nofollow noreferrer">http://www.elevateweb.co.uk/image-zoom/examples</a></p>
  
  <p>İn the site go to the partision named gallery &amp; lightbox.</p>
  
  <p>I've tried the code but it did not work.</p>
  
  <p>Code : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="gal1"&gt;
  
    &lt;a href="#" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png"&gt;
      &lt;img id="img_01" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" /&gt;
    &lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
      //initiate the plugin and pass the id of the div containing gallery images
  $("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 
  
  //pass the images to Fancybox
  $("#zoom_03").bind("click", function(e) {  
    var ez =   $('#zoom_03').data('elevateZoom'); 
      $.fancybox(ez.getGalleryList());
    return false;
  });
  
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  
      /*set a border on the images to prevent shifting*/
   #gallery_01 img{border:2px solid white;}
  
   /*Change the colour*/
   .active img{border:2px solid #333 !important;}
  
  &lt;/style&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Help please.</p>
  
  <p>Not : I don't have a good English. Pardon me. I hope you understand.</p>