Magic Zoom™

Examples

Entire image

Show the whole image on hover - perfect for previewing small images in an instant.

Here's the code:

  1. <html>
  2.     <head>
  3.             <title>Magic Zoom: Entire image</title>
  4.            
  5.             <!-- link to magiczoom.css file -->
  6.             <link href="magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
  7.             <!-- link to magiczoom.js file -->
  8.             <script src="magiczoom.js" type="text/javascript"></script>
  9.             <style type="text/css">
  10.                 /* Styles for zoom pup window (that one what move with mouse above small image) */
  11.                 .MagicZoomPup {
  12.                     background:     #90a8d6;
  13.                 }
  14.             </style>
  15.        
  16.     </head>
  17.     <body>
  18.            
  19.         <p>Show the whole image on hover - perfect for previewing small images in an instant.</p>
  20.  
  21.         <!-- define Magic Zoom -->
  22.         <a href="images/r1-blue-480.jpg" class="MagicZoom" rel="entire-image: true; zoom-fade: true; show-title: false" title="Blue Yamaha YZF-R1"><img src="images/r1-blue-160.jpg"/></a>
  23.            
  24.     </body>
  25. </html>