Magic 360™

Examples

Full-screen & magnify

Buy now Get support

Full-screen button shows in top right. Click image to magnify.

Circle magnifying glass.

Square magnifying glass with the width of 40%.

Disable full-screen & magnify.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic 360&trade;: Full-screen &amp; magnify</title>
  4.        
  5.         <link rel="stylesheet" type="text/css" href="magic360/magic360.css" />
  6.         <script type="text/javascript" src="magic360/magic360.js"></script>
  7.        
  8.     </head>
  9.     <body>
  10.        
  11.         <table width="100%">
  12.         <tr>
  13.             <td>
  14.                 <p>Full-screen button shows in top right. Click image to magnify.</p>
  15.                 <a class="Magic360" href="images/shoe/shoe-800-01.jpg" data-magic360-options="filename: shoe-360-{col}.jpg; large-filename: shoe-800-{col}.jpg;"><img src="images/shoe/shoe-360-01.jpg"/></a>
  16.             </td>
  17.             <td>
  18.                 <p>Circle magnifying glass.</p>
  19.                 <a class="Magic360" href="images/shoe/shoe-800-01.jpg" data-magic360-options="magnifier-shape: circle; filename: shoe-360-{col}.jpg; large-filename: shoe-800-{col}.jpg;"><img src="images/shoe/shoe-360-01.jpg"/></a>
  20.             </td>
  21.         </tr>
  22.         <tr>
  23.             <td>
  24.                 <p>Square magnifying glass with the width of 40%.</p>
  25.                 <a class="Magic360" href="images/shoe/shoe-800-01.jpg" data-magic360-options="magnifier-shape: square; magnifier-width: 40%; filename: shoe-360-{col}.jpg; large-filename: shoe-800-{col}.jpg;"><img src="images/shoe/shoe-360-01.jpg"/></a>
  26.             </td>
  27.             <td>
  28.                 <p>Disable full-screen &amp; magnify.</p>
  29.                 <a class="Magic360" href="images/shoe/shoe-800-01.jpg" data-magic360-options="fullscreen: false; magnify: false; filename:shoe-360-{col}.jpg; large-filename: shoe-800-{col}.jpg;"><img src="images/shoe/shoe-360-01.jpg"/></a>
  30.             </td>
  31.         </tr>
  32.         </table>
  33.        
  34.     </body>
  35. </html>