API examples

Buy now Get support

You can start, stop, refresh and control the slideshow by using the API.

Start | Stop | Refresh |

Previous | Pause | Next |

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Slideshow: API examples</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 type="text/javascript">
  9.             var MagicSlideshowOptions = {
  10.                 'width': '600px',
  11.                 'height': '300px',
  12.                 'selectors': 'bottom'
  13.             };
  14.         </script>
  15.         <script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>
  16.         <!-- set options -->
  17.        
  18.     </head>
  19.     <body>
  20.        
  21.         <p>
  22.             <a href="javascript:void(0);" onclick="MagicSlideshow.start('slide-1');return false;">Start</a><b> | </b>
  23.             <a href="javascript:void(0);" onclick="MagicSlideshow.stop('slide-1');return false;">Stop</a><b> | </b>
  24.             <a href="javascript:void(0);" onclick="MagicSlideshow.refresh('slide-1');return false;">Refresh</a><b> | </b>
  25.         </p>
  26.         <p>
  27.             <a href="javascript:void(0);" onclick="MagicSlideshow.prev('slide-1');return false;">Previous</a><b> | </b>
  28.             <a href="javascript:void(0);" onclick="if ( 'false'==this.getAttribute('data-play') ) { MagicSlideshow.play('slide-1'); this.innerHTML = 'Pause'; this.setAttribute('data-play', 'true'); } else { MagicSlideshow.pause('slide-1'); this.innerHTML = 'Play'; this.setAttribute('data-play', 'false'); } return false;" data-play="true">Pause</a><b> | </b>
  29.             <a href="javascript:void(0);" onclick="MagicSlideshow.next('slide-1');return false;">Next</a><b> | </b>
  30.         </p>
  31.  
  32.         <div class="MagicSlideshow" id="slide-1">
  33.             <img src="images/places-01-600.jpg"/>
  34.             <img src="images/places-02-600.jpg"/>
  35.             <img src="images/places-03-600.jpg"/>
  36.             <img src="images/places-04-600.jpg"/>
  37.             <img src="images/places-05-600.jpg"/>
  38.             <img src="images/places-06-600.jpg"/>
  39.             <img src="images/places-07-600.jpg"/>
  40.         </div>
  41.  
  42.        
  43.     </body>
  44. </html>