Magic 360™

Examples

Message & arrows

Buy now Get support

You can change the text and arrows shown in the "hint".

Hint with different text "360".

Hint with different text "360" and different arrows.

Hint disabled.

  

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic 360&trade;: Message &amp; arrows</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 hint of the second spin -->
  9.         <style type="text/css">
  10.             .second .Magic360 .Magic360-hint .hint-side {
  11.                 background-image: url(magic360/graphics/hint-03.png);
  12.             }
  13.         </style>
  14.  
  15.         <!-- Change the hint text  -->
  16.         <script type="text/javascript">
  17.             Magic360.lang = {
  18.                 'hint-text': '360'
  19.                 ,'mobile-hint-text': '360'
  20.             }
  21.         </script>
  22.        
  23.     </head>
  24.     <body>
  25.        
  26.         <p>You can change the text and arrows shown in the "hint".</p>
  27.         <table width="100%">
  28.         <tr>
  29.             <td>
  30.                 <p>Hint with different text "360".</p>
  31.                 <a class="Magic360" href="#" data-magic360-options="filename: shoe-360-{col}.jpg;"><img src="images/shoe/shoe-360-01.jpg"/></a>
  32.             </td>
  33.             <td class="second">
  34.                 <p>Hint with different text "360" and different arrows.</p>
  35.                 <a class="Magic360" href="#" data-magic360-options="filename: shoe-360-{col}.jpg;"><img src="images/shoe/shoe-360-01.jpg"/></a>
  36.             </td>
  37.        </tr>
  38.         <tr>
  39.             <td>
  40.                 <p>Hint disabled.</p>
  41.                 <a class="Magic360" href="#" data-magic360-options="filename: shoe-360-{col}.jpg; hint: false;"><img src="images/shoe/shoe-360-01.jpg"/></a>
  42.             </td>
  43.             <td>&nbsp;</td>
  44.        </tr>
  45.        </table>
  46.        
  47.     </body>
  48. </html>