Combinations

Buy now  £29 Get support

You can combine our other tools with Magic Scroll.

For example, if you have lots of images of a product, you can scroll them with Magic Scroll™ and zoom them with Magic Zoom Plus™.

Here is an example.

Here is what the code might look like:

  1. <html>
  2.     <head>
  3.         <title>Magic Scroll: Combinations</title>
  4.         <!-- link to magiczoomplus.css file -->
  5.         <link href="magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
  6.         <!-- link to magicscroll.css file -->
  7.         <link rel="stylesheet" type="text/css" href="magicscroll/magicscroll.css" media="screen"/>
  8.         <!-- link to magiczoomplus.js file -->
  9.         <script src="magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
  10.         <!-- link to magicscroll.js file -->
  11.         <script src="magicscroll/magicscroll.js" type="text/javascript"></script>
  12.     </head>
  13.     <body>
  14.         <!-- define Magic Scroll -->
  15.         <div class="MagicScroll">
  16.             <a rel="zoom-id:mzp" href="images/nexus1.jpg" rev="images/nexus1-250.jpg"><img src="images/nexus1-60.jpg" /></a>
  17.             <a rel="zoom-id:mzp" href="images/nexus2.jpg" rev="images/nexus2-250.jpg"><img src="images/nexus2-60.jpg" /></a>
  18.             <a rel="zoom-id:mzp" href="images/nexus3.jpg" rev="images/nexus3-250.jpg"><img src="images/nexus3-60.jpg" /></a>
  19.             <a rel="zoom-id:mzp" href="images/nexus4.jpg" rev="images/nexus4-250.jpg"><img src="images/nexus4-60.jpg" /></a>
  20.             <a rel="zoom-id:mzp" href="images/nexus5.jpg" rev="images/nexus5-250.jpg"><img src="images/nexus5-60.jpg" /></a>
  21.             <a rel="zoom-id:mzp" href="images/nexus6.jpg" rev="images/nexus6-250.jpg"><img src="images/nexus6-60.jpg" /></a>
  22.             <a rel="zoom-id:mzp" href="images/nexus7.jpg" rev="images/nexus7-250.jpg"><img src="images/nexus7-60.jpg" /></a>
  23.             <a rel="zoom-id:mzp" href="images/nexus8.jpg" rev="images/nexus8-250.jpg"><img src="images/nexus8-60.jpg" /></a>
  24.         </div>
  25.         <a class="MagicZoomPlus" id="mzp" href="images/nexus1.jpg"><img src="images/nexus1-250.jpg" /></a>
  26.     </body>
  27. </html>