Full Screen with fade effect

Buy now Get support

Slideshow loads larger images in full screen. You can change slides with the left and right arrows on your keyboard.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Slideshow: Full Screen with fade effect</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="fullscreen: true; effect: fade; width: 600; selectors: top; selectors-style: thumbnails; selectors-size: 80x37;">
  14.             <img src="images/places-01-600.jpg" data-thumb-image="images/places-01-80.jpg" data-fullscreen-image="images/places-01-1075.jpg"/>
  15.             <img src="images/places-02-600.jpg" data-thumb-image="images/places-02-80.jpg" data-fullscreen-image="images/places-02-1075.jpg"/>
  16.             <img src="images/places-03-600.jpg" data-thumb-image="images/places-03-80.jpg" data-fullscreen-image="images/places-03-1075.jpg"/>
  17.             <img src="images/places-04-600.jpg" data-thumb-image="images/places-04-80.jpg" data-fullscreen-image="images/places-04-1075.jpg"/>
  18.             <img src="images/places-05-600.jpg" data-thumb-image="images/places-05-80.jpg" data-fullscreen-image="images/places-05-1075.jpg"/>
  19.             <img src="images/places-06-600.jpg" data-thumb-image="images/places-06-80.jpg" data-fullscreen-image="images/places-06-1075.jpg"/>
  20.             <img src="images/places-07-600.jpg" data-thumb-image="images/places-07-80.jpg" data-fullscreen-image="images/places-07-1075.jpg"/>
  21.             <img src="images/places-08-600.jpg" data-thumb-image="images/places-08-80.jpg" data-fullscreen-image="images/places-08-1075.jpg"/>
  22.             <img src="images/places-09-600.jpg" data-thumb-image="images/places-09-80.jpg" data-fullscreen-image="images/places-09-1075.jpg"/>
  23.             <img src="images/places-10-600.jpg" data-thumb-image="images/places-10-80.jpg" data-fullscreen-image="images/places-10-1075.jpg"/>
  24.             <img src="images/places-11-600.jpg" data-thumb-image="images/places-11-80.jpg" data-fullscreen-image="images/places-11-1075.jpg"/>
  25.             <img src="images/places-12-600.jpg" data-thumb-image="images/places-12-80.jpg" data-fullscreen-image="images/places-12-1075.jpg"/>
  26.         </div>
  27.        
  28.     </body>
  29. </html>