Magic Zoom™

Examples

CSS styling

Buy now Get support

CSS changed to show blue hover and blue title background. Title position set to bottom. Highlighting active thumbnail.


Magic Zoom™ with own CSS styles and glow effect on a zoom window

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom: CSS styling</title>
  4.        
  5.         <!-- link to magiczoom.css file -->
  6.         <link href="magiczoom/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
  7.         <!-- link to magiczoom.js file -->
  8.         <script src="magiczoom/magiczoom.js" type="text/javascript"></script>
  9.  
  10.         <style type="text/css">
  11.             /* these 3 CSS classes below will change the default look of the Magic Zoom */
  12.             /* Styles for zoom pup window (that one what move with mouse above small image) */
  13.             .MagicZoomPup {
  14.                 background:     #90a8d6;
  15.                 border:         1px solid #022e6f;
  16.             }
  17.             /* Styles for header on large zoom window */
  18.             .MagicZoomHeader {
  19.                 background:     #90a8d6;
  20.                 font-size: 12px;
  21.             }
  22.             /* Styles for large zoom window */
  23.             .MagicZoomBigImageCont {
  24.                 border:         1px solid #90a8d6;
  25.             }
  26.  
  27.  
  28.             /* these 3 are the styles for the second Magic Zoom on this page */
  29.             /* Styles for zoom pup window (that one what move with mouse above small image) */
  30.             .MagicZoom2 .MagicZoomPup {
  31.                 background:     #d9aa72;
  32.                 border:         1px solid #000000;
  33.             }
  34.             /* Styles for header on large zoom window */
  35.             .MagicZoom2 .MagicZoomHeader {
  36.                 background:     #d9aa72;
  37.                 font-size: 12px;
  38.             }
  39.             /* Styles for large zoom window */
  40.             .MagicZoom2 .MagicZoomBigImageCont {
  41.                 border:         1px solid #d9aa72;
  42.             }
  43.  
  44.  
  45.             /* CSS classes for multiple image selectors */
  46.             /* Styles for the inactive selector */
  47.             .Selector img {
  48.                 border: 2px solid #ccc;
  49.             }
  50.             /* Style for the active selector */
  51.             .Selector.Active img {
  52.                 border: 2px solid #FB9E11;
  53.             }
  54.         </style>
  55.        
  56.     </head>
  57.     <body>
  58.        
  59.         <p>CSS changed to show blue hover and blue title background. Title position set to bottom. Highlighting active thumbnail.</p>
  60.  
  61.         <!-- define Magic Zoom -->
  62.         <a href="images/r1-blue-3.jpg" class="MagicZoom" id="zoom" rel="show-title: bottom; selectors-class: Active;" title="Blue Yamaha YZF-R1"><img src="images/r1-blue-2.jpg"/></a> <br/>
  63.  
  64.         <a href="images/r1-black-3.jpg" class="Selector" rel="zoom-id:zoom" rev="images/r1-black-2.jpg" title="Black Yamaha YZF-R1"><img src="images/r1-black-1.jpg"/></a>
  65.         <a href="images/r1-blue-3.jpg" class="Selector" rel="zoom-id:zoom" rev="images/r1-blue-2.jpg" title="Blue Yamaha YZF-r1"><img src="images/r1-blue-1.jpg"/></a>
  66.  
  67.         <p>Magic Zoom&trade; with own CSS styles and glow effect on a zoom window</p>
  68.  
  69.         <!-- define Magic Zoom with another CSS styling -->
  70.         <a href="images/r1-black-3.jpg" class="MagicZoom MagicZoom2" title="Black Yamaha YZF-R1" rel="zoom-window-effect: glow"><img src="images/r1-black-2.jpg"/></a>
  71.  
  72.        
  73.     </body>
  74. </html>