Magic Zoom Plus™

Examples

Buttons

Buy now  £39 Get support

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

  1. Select the size of buttons

  2. Choose the design

  3. Enlarge images

    These buttons hide when you move cursor outside the image.
    Harley-Davidson Dyna Wide Glide

Here's the code:

  1. <p>Enlarge images</p>
  2. <!-- define Magic Zoom Plus -->
  3. <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="hotspots: hd-spots; caption-source: img:alt; buttons: autohide;" title="Harley-Davidson Dyna Wide Glide"><img src="images/harley1b.jpg" alt="These buttons hide when you move cursor outside the image."/></a>
  4.  
  5. <!-- define hotspots -->
  6. <div id="hd-spots" class="MagicHotspots">
  7.     <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"></a>
  8.     <a href="images/harley5.jpg" coords="130,75,196,110" title="Buttons in the bottom left corner." class="MagicThumb" rel="buttons-position: bottom left"></a>
  9.     <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"></a>
  10. </div>