Magic Zoom Plus™

Examples

CSS styling

joesnet mobilejoe

CSS changed to show blue hover and the blue background of the title and caption. Title position set to bottom, caption placed to the right of the image.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: CSS styling</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 zoom pup window (that one what move with mouse above small image) */
  12.             .MagicZoomPup {
  13.                 background:     #90a8d6;
  14.                 border:         1px solid #022e6f;
  15.             }
  16.             /* Styles for header on large zoom window */
  17.             .MagicZoomHeader {
  18.                 background:     #90a8d6;
  19.                 font-size: 12px;
  20.             }
  21.             /* Styles for large zoom window */
  22.             .MagicZoomBigImageCont {
  23.                 border:         1px solid #90a8d6;
  24.             }
  25.             /* Style of the expanded image */
  26.             .MagicThumb-expanded {
  27.                 border: 1px solid #90a8d6;
  28.             }
  29.             /* Style of the caption for the expanded image */
  30.             .MagicThumb-caption {
  31.                 background: #90a8d6;
  32.                 color: #fff;
  33.             }
  34.         </style>
  35.        
  36.     </head>
  37.     <body>
  38.        
  39.         <p>CSS changed to show blue hover and the blue background of the title and caption. Title position set to bottom, caption placed to the right of the image.</p>
  40.  
  41.         <!-- define Magic Zoom Plus -->
  42.         <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="show-title: bottom; caption-position: right" title="Harley-Davidson Dyna Wide Glide"><img src="images/harley1b.jpg"/></a>
  43.  
  44.        
  45.     </body>
  46. </html>