পৃষ্ঠাসমূহ

.

Search Your Article

Total Pageviews

Tuesday, February 28, 2017

jQuery - Slideshow.js

Slideshow.js is a jQuery plugin for quickly and easily implementing slide show of images or videos into your website.
A Simple of slide show example as shown below
<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" />  
      <link rel = "stylesheet" href = "css/supersized.css" 
         type = "text/css" media = "screen" />
      <link rel = "stylesheet" href = "theme/supersized.shutter.css" 
         type = "text/css" media = "screen" />
  
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/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({
               slideshow        :  1,   
               autoplay         :  1,   
               start_slide      :  1,   
               stop_loop        :  0,   
               random           :  0,   
               slide_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,   
               slide_links      :  'blank', 
               thumb_links      :  1,   
               thumbnail_navigation:   0,   
               slides :   [{image : '
                  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/sli
                     des/kazvan-1.jpg',
      
                  title  : 'Sample demo', thumb :
                  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thu
                     mbs/kazvan-1.jpg', 
                  url : 'https://www.tutorialspoint.com'},
      
                  {image : '
                  https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/sli
                     des/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/
                     slides/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/
                     slides/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/
                     slides/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 li{ margin:0 0 10px 0; padding:10px; display:inline; float:left;
      clear:both; color:#aaa; background:url('img/bg-black.png'); 
         font:11px Helvetica, Arial, sans-serif; }
      ul#demo-block li a{ color:#eee; font-weight:bold; }
   </style>
  
   <body>
  
      <div id = "prevthumb"></div>
      <div id = "nextthumb"></div>
   
      <a id = "prevslide" class = "load-item"></a>
      <a id = "nextslide" class = "load-item"></a>
   
      <div id = "thumb-tray" class = "load-item">
         <div id = "thumb-back"></div>
         <div id = "thumb-forward"></div>
      </div>
   
      <div id = "progress-back" class = "load-item">
         <div id = "progress-bar"></div>
      </div>
   
      <div id = "controls-wrapper" class = "load-item">
   
         <div id = "controls">
   
            <a id = "play-button"><img id = "pauseplay" 
               src = "img/pause.png"/></a>
     
            <div id = "slidecounter">
               <span class = "slidenumber"></span> / <
                  span class = "totalslides"></span>
            </div>
     
            <div id = "slidecaption"></div>
               <a id = "tray-button"><img id = "tray-arrow" 
                  src = "img/button-tray-up.png"/></a>
               <ul id = "slide-list"></ul>
            </div>
    
         </div>
   
      </div>
  
   </body>
 
</html>
This should produce following result −
Click here
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)