Magic 360™

Examples

CSS styling

Buy now Get support

You can change the "loading" styles and all other styles in the magic360.css file. This example has a dark "loading" bar. Refresh the page to see it again.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic 360&trade;: CSS styling</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 dark loading bar -->
  9.         <style type="text/css">
  10.             .Magic360-loading-box {
  11.                 background: rgba(0,0,0,0.6);
  12.                 border:1px solid rgba(255,255,255,0.5);
  13.                 color: #fff;
  14.             }
  15.             .Magic360-progress-bar {
  16.                 background: #000;
  17.                 background-image: none;
  18.                 background: rgba(0,0,0,0.6);
  19.                 border: none;
  20.             }
  21.         </style>
  22.        
  23.     </head>
  24.     <body>
  25.        
  26.         <p>You can change the <strong>"loading"</strong> styles and all other styles in the magic360.css file.
  27.             This example has a dark "loading" bar. Refresh the page to see it again.
  28.         </p>
  29.         <p>
  30.             <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>
  31.        </p>
  32.        
  33.     </body>
  34. </html>