Magic Zoom Plus™

Examples

Title & Caption

Buy now Get support

You can display absolutely any HTML in this caption.

Adjust the width/height and the location (top/bottom/left/right) as you wish.

To adjust the background, fonts and borders, open the magiczoomplus.css file.

All these options are described in the integration guide.

You can even add forms, images and links in here.

Title at top, caption to right

Hello!
This is a bold multi-line title

Inner zoom, title at top

Title at top, caption to left

Inner zoom, title at bottom

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: Title &amp; Caption</title>
  4.        
  5.             <!-- link to magiczoomplus.css file -->
  6.             <link href="magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
  7.             <!-- link to magiczoomplus.js file -->
  8.             <script src="magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
  9.            
  10.             <style type="text/css">
  11.                 /* Styles for large zoom window */
  12.                 .no-border .MagicZoomBigImageCont {
  13.                     border: 0;
  14.                 }
  15.             </style>
  16.        
  17.     </head>
  18.     <body>
  19.        
  20.         <!-- define external caption for Magic Zoom Plus -->
  21.         <div id="zoom-caption" class="MagicZoomPlus-ExternalText">
  22.             <p>You can display absolutely any HTML in this caption.</p>
  23.             <p>Adjust the width/height and the location (top/bottom/left/right) as you wish.</p>
  24.             <p>To adjust the background, fonts and borders, open the magiczoomplus.css file.</p>
  25.             <p>All these options are described in the <a href="http://www.magictoolbox.com/magiczoomplus/integration/">integration guide</a>.</p>
  26.             <p>You can even add forms, images and links in here.</p>
  27.         </div>
  28.         <table width="100%">
  29.             <tr>
  30.                 <td>
  31.                     <p>Title at top, caption to right</p>
  32.                     <!-- define external title for Magic Zoom Plus -->
  33.                     <span id="zoom-header" class="MagicZoomPlus-ExternalText">Hello!<br/>This is a <b>bold multi-line title</b></span>
  34.  
  35.                     <a href="images/harley1c.jpg" class="MagicZoomPlus no-border" rel="zoom-window-effect: false; show-title: top; title-source: #zoom-header; caption-position: right; caption-source: #zoom-caption; group: ex1;"><img src="images/harley1b.jpg"/></a>
  36.                 </td>
  37.                 <td>
  38.                     <p>Inner zoom, title at top</p>
  39.                     <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position: inner; show-title: top; group: ex2;" title="Inner zoom with a title at top"><img src="images/harley2b.jpg"/></a>
  40.                 </td>
  41.             </tr>
  42.             <tr>
  43.                 <td>
  44.                     <p>Title at top, caption to left</p>
  45.                     <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="show-title: top; caption-position: left; caption-source: #zoom-caption;  group: ex3;" title="Title at top"><img src="images/harley2b.jpg"/></a>
  46.                 </td>
  47.                 <td>
  48.                     <p>Inner zoom, title at bottom</p>
  49.                     <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position: inner; show-title: bottom; group: ex4;"  title="Inner zoom with a title at bottom"><img src="images/harley1b.jpg"/></a>
  50.                 </td>
  51.             </tr>
  52.         </table>
  53.        
  54.     </body>
  55. </html>