Magic Zoom Plus™

Examples

Buttons

Buy now Get support

Choose the design, size, position and number of buttons.

  1. Select the size of buttons

  2. Choose the design

  3. Translate text on the buttons




  4. , then enlarge images

    These buttons hide when you move cursor outside the image.

Here's the code:

  1. <!-- Translate buttons -->
  2. <script type="text/javascript">
  3.     MagicZoomPlus.lang = {
  4.     }
  5. </script>
  6.  
  7.  
  8. <!-- define Magic Zoom Plus -->
  9. <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="hotspots: hd-spots; caption-source: img:alt; buttons: autohide; pan-zoom: false;" title="Harley-Davidson Dyna Wide Glide"><img src="images/harley1b.jpg" alt="These buttons hide when you move cursor outside the image."/></a>
  10.  
  11. <!-- define hotspots -->
  12. <div id="hd-spots" class="MagicHotspots">
  13.     <a href="images/harley4.jpg" coords="115,145,135,165" title="Buttons automatically placed in the top left or top right (depending on Windows/Mac/Linux)" class="MagicThumb" rel="pan-zoom: false;"></a>
  14.     <a href="images/harley5.jpg" coords="130,75,196,110" title="Buttons in the bottom left corner." class="MagicThumb" rel="buttons-position: bottom left; pan-zoom: false;"></a>
  15.     <a href="images/harley3.jpg" coords="75,120,85,140" title="Buttons in the top right, with the forward and back buttons hidden." class="MagicThumb" rel="buttons-display:close; buttons-position:top right; pan-zoom: false;"></a>
  16. </div>