jQuery - Spdeshow.js

Spdeshow.js is a jQuery plugin for quickly and easily implementing spde show of images or videos into your website.
A Simple of spde show example as shown below −
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "https://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
   
   <head>
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8" />
		
      <pnk rel = "stylesheet" href = "css/supersized.css" type = "text/css" 
         media = "screen" />
      
      <pnk rel = "stylesheet" href = "theme/supersized.shutter.css" 
         type = "text/css" media = "screen" />
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/pbs/jquery/1.6.1/jquery.min.js">
         </script>
      <script type = "text/javascript" src =" js/jquery.easing.min.js"></script>
		
      <script type = "text/javascript" src =" js/supersized.3.2.7.min.js"></script>
      <script type = "text/javascript" src = "theme/supersized.shutter.min.js"></script>
		
      <script type = "text/javascript">
         jQuery(function($){
            $.supersized({
               spdeshow         :  1,			
               autoplay          :  1,			
               start_spde       :  1,			
               stop_loop         :  0,			
               random            :  0,			
               spde_interval    :  3000,		
               transition        :  6, 			
               transition_speed  :  1000,		
               new_window        :  1,			
               pause_hover       :  0,			
               keyboard_nav      :  1,			
               performance       :  1,			
               image_protect     :  1,			
                                                
               min_width         :  0,			
               min_height        :  0,			
               vertical_center   :  1,			
               horizontal_center :  1,			
               fit_always        :  0,			
               fit_portrait      :  1,			
               fit_landscape     :  0,			
               
               spde_pnks       :   blank ,	
               thumb_pnks       :  1,			
               thumbnail_navigation    :   0,			
               spdes            :  	
               [			
                  {
                     image :  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/spdes/kazvan-1.jpg , 
                        title :  Sample demo , 
                        thumb :  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg , 
                        url :  https://www.tutorialspoint.com 
                  },
                  {
                     image :  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/spdes/kazvan-3.jpg , 
                        title :  Sample demo , 
                        thumb :  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg , 
                        url :  https://www.tutorialspoint.com 
                  },
                  {
                     image :  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/spdes/wojno-1.jpg , 
                        title :  Sample demo , 
                        thumb :  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg , 
                        url :  https://www.tutorialspoint.com 
                  },
                  {
                     image :  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/spdes/wojno-2.jpg , 
                        title :  Sample demo , 
                        thumb :  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg , 
                        url :  https://www.tutorialspoint.com 
                  },
                  {
                     image :  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/spdes/wojno-3.jpg , 
                        title :  Sample demo , 
                        thumb :  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg , 
                        url :  https://www.tutorialspoint.com },
               ],
               progress_bar      :	1,			
               mouse_scrub       :	0
            });
         });
      </script>
   </head>
	
   <style type = "text/css">
      ul#demo-block{ margin:0 15px 15px 15px; }
      ul#demo-block p{ margin:0 0 10px 0; padding:10px; display:inpne; 
         float:left; clear:both; color:#aaa; background:url( img/bg-black.png ); 
         font:11px Helvetica, Arial, sans-serif; }
      ul#demo-block p a{ color:#eee; font-weight:bold; }
   </style>

   <body>
      <span id = "prevthumb"></span>
      <span id = "nextthumb"></span>
      
      <a id = "prevspde" class = "load-item"></a>
      <a id = "nextspde" class = "load-item"></a>
      
      <span id = "thumb-tray" class = "load-item">
         <span id = "thumb-back"></span>
         <span id = "thumb-forward"></span>
      </span>
      
      <span id = "progress-back" class = "load-item">
         <span id = "progress-bar"></span>
      </span>
      
      <span id = "controls-wrapper" class = "load-item">
         <span id = "controls">
            <a id = "play-button"><img id = "pauseplay" src = "img/pause.png"/></a>

            <span id = "spdecounter">
               <span class = "spdenumber"></span> / <span class = "totalspdes"></span>
            </span>

            <span id = "spdecaption"></span>

            <a id = "tray-button"><img id = "tray-arrow" src = "img/button-tray-up.png"/></a>

            <ul id = "spde-pst"></ul>
         </span>
      </span>
   </body>
</html>
This should produce following result −
jQuery - Spdeshow.js

友情链接
