Thumbnails

Buy now Get support

Show small thumbnails images by automatically scaling down the large images.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Slideshow: Thumbnails</title>
  4.        
  5.         <!-- link to magicslideshow.css file -->
  6.         <link rel="stylesheet" type="text/css" href="magicslideshow/magicslideshow.css" media="screen"/>
  7.         <!-- link to magicslideshow.js file -->
  8.         <script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>
  9.        
  10.     </head>
  11.     <body>
  12.        
  13.             <div class="MagicSlideshow" data-options="width: 600px; height: 281px; selectors: bottom; selectors-style: thumbnails; selectors-size: 60px;">
  14.                 <img src="images/places-01-600.jpg"/>
  15.                 <img src="images/places-02-600.jpg"/>
  16.                 <img src="images/places-03-600.jpg"/>
  17.                 <img src="images/places-04-600.jpg"/>
  18.                 <img src="images/places-05-600.jpg"/>
  19.                 <img src="images/places-06-600.jpg"/>
  20.                 <img src="images/places-07-600.jpg"/>
  21.             </div>
  22.        
  23.     </body>
  24. </html>