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>
  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>
  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>