Vertical thumbnails

Buy now Get support

This slideshow is 60% of the width of its parent div. Resize the page to see it scale up/down.
Thumbnails are actual images (80px width), not scaled down large images.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Slideshow: Vertical 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.         <style type="text/css">
  10.             .mss-slide { padding: 0 8px; }
  11.         </style>
  12.        
  13.     </head>
  14.     <body>
  15.        
  16.         <div class="MagicSlideshow" data-options="selectors: right; selectors-style: thumbnails; selectors-size: 80; width: 60%;">
  17.             <img src="images/places-01-600.jpg" data-thumb-image="images/places-01-80.jpg"/>
  18.             <img src="images/places-02-600.jpg" data-thumb-image="images/places-02-80.jpg"/>
  19.             <img src="images/places-03-600.jpg" data-thumb-image="images/places-03-80.jpg"/>
  20.             <img src="images/places-04-600.jpg" data-thumb-image="images/places-04-80.jpg"/>
  21.             <img src="images/places-05-600.jpg" data-thumb-image="images/places-05-80.jpg"/>
  22.             <img src="images/places-06-600.jpg" data-thumb-image="images/places-06-80.jpg"/>
  23.             <img src="images/places-07-600.jpg" data-thumb-image="images/places-07-80.jpg"/>
  24.             <img src="images/places-08-600.jpg" data-thumb-image="images/places-08-80.jpg"/>
  25.             <img src="images/places-09-600.jpg" data-thumb-image="images/places-09-80.jpg"/>
  26.             <img src="images/places-10-600.jpg" data-thumb-image="images/places-10-80.jpg"/>
  27.             <img src="images/places-11-600.jpg" data-thumb-image="images/places-11-80.jpg"/>
  28.             <img src="images/places-12-600.jpg" data-thumb-image="images/places-12-80.jpg"/>
  29.         </div>
  30.        
  31.     </body>
  32. </html>