Magic Zoom™

Examples

Title options

Buy now Get support

Title position set to top, external source

Hello!
I'm bold multiline title

Inner zoom, Title at the top

Title position set to bottom, title source

Inner zoom, Title at the bottom

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom: Title options</title>
  4.        
  5.         <!-- link to magiczoom.css file -->
  6.         <link href="magiczoom/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
  7.         <!-- link to magiczoom.js file -->
  8.         <script src="magiczoom/magiczoom.js" type="text/javascript"></script>
  9.        
  10.     </head>
  11.     <body>
  12.        
  13.         <table width="100%">
  14.         <tr>
  15.             <td>
  16.                 <p>Title position set to top, external source</p>
  17.                 <!-- define external title for Magic Zoom -->
  18.                 <span id="zoom-header" class="MagicZoomExternalTitle">Hello!<br/>I'm <b>bold multiline title</b></span>
  19.                 <!-- define Magic Zoom -->
  20.                 <a href="images/r1-blue-3.jpg" class="MagicZoom" rel="show-title: top; title-source: #zoom-header;" title="Blue Yamaha YZF-R1"><img src="images/r1-blue-2.jpg"/></a>
  21.             </td>
  22.             <td>
  23.                 <p>Inner zoom, Title at the top</p>
  24.                 <a href="images/r1-red-3.jpg" class="MagicZoom" rel="zoom-position: inner; show-title: top;" title="White Yamaha YZF-R1"><img src="images/r1-red-2.jpg"/></a>
  25.             </td>
  26.         </tr>
  27.         <tr>
  28.             <td>
  29.                 <p>Title position set to bottom, title source</p>
  30.                 <!-- define Magic Zoom -->
  31.                 <a href="images/r1-black-3.jpg" class="MagicZoom" rel="show-title: bottom;" title="Black Yamaha YZF-R1"><img src="images/r1-black-2.jpg"/></a>
  32.             </td>
  33.             <td>
  34.                 <p>Inner zoom, Title at the bottom</p>
  35.                 <a href="images/r1-blue-3.jpg" class="MagicZoom" id="zoom" rel="zoom-position: inner; show-title: bottom; " title="Blue Yamaha YZF-R1"><img src="images/r1-blue-2.jpg"/></a>
  36.             </td>
  37.         </tr>
  38.         </table>
  39.        
  40.     </body>
  41. </html>