Magic 360™

Examples

Buttons & text

Buy now Get support

You can change text shown during image loading and on the hint with Magic360.lang.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic 360&trade;: Buttons &amp; text</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.         <!-- Styles for the full-screen buttons -->
  9.         <style type="text/css">
  10.             .Magic360-button.fullscreen {
  11.                 background-image: url(magic360/graphics/buttons06.png);
  12.             }
  13.             .Magic360-button.fullscreen-exit {
  14.                 background-image: url(magic360/graphics/buttons06.png);
  15.             }
  16.         </style>        
  17.        
  18.         <!-- Change the loading text and the hint text  -->
  19.         <script type="text/javascript">
  20.             Magic360.lang = {
  21.                 'hint-text': 'Your text here'
  22.                 ,'mobile-hint-text': 'Your text here'
  23.                 ,'loading-text': 'Loading images. Please wait...'
  24.             }
  25.         </script>
  26.        
  27.     </head>
  28.     <body>
  29.        
  30.         <p>You can change text shown during image loading and on the hint with <strong>Magic360.lang</strong>.</p>
  31.         <p>
  32.             <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>
  33.         </p>
  34.        
  35.     </body>
  36. </html>