Magic Zoom Plus™

Examples

CSS styling

Buy now Get support

CSS changed to show blue hover and the blue background of the title and caption. Highlighting active thumbnail.


Glow effect on a zoom window. 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.  
  35.  
  36.             /* CSS classes for multiple image selectors */
  37.             /* Styles for the inactive selector */
  38.             .Selector img {
  39.                 border: 2px solid #ccc;
  40.             }
  41.             /* Style for the active selector */
  42.             .Selector.Active img {
  43.                 border: 2px solid #FB9E11;
  44.             }
  45.         </style>
  46.        
  47.     </head>
  48.     <body>
  49.        
  50.         <p>CSS changed to show blue hover and the blue background of the title and caption. Highlighting active thumbnail.</p>
  51.  
  52.         <a id="Zoomer" href="images/harley1c.jpg" class="MagicZoomPlus" rel="show-title: bottom; selectors-class: Active;" title="Harley-Davidson Dyna Wide Glide"><img src="images/harley1b.jpg"/></a><br/>
  53.  
  54.         <a href="images/harley1c.jpg" class="Selector"  rel="zoom-id:Zoomer" rev="images/harley1b.jpg"><img src="images/harley1a.jpg"/></a>
  55.         <a href="images/harley2c.jpg" class="Selector"  rel="zoom-id:Zoomer" rev="images/harley2b.jpg"><img src="images/harley2a.jpg"/></a>
  56.  
  57.         <p class="pad">Glow effect on a zoom window. Caption placed to the right of the image.</p>
  58.         <a id="Zoomer2" href="images/harley2c.jpg" class="MagicZoomPlus" rel="show-title: top; caption-position: right; zoom-window-effect: glow;" title="Harley-Davidson Dyna Wide Glide"><img src="images/harley2b.jpg"/></a><br/>
  59.        
  60.     </body>
  61. </html>