Guider

Implementation example:

1. Append to page references to 2 required plugin files as:

   <link href="/Plugin/Guider/jq.guider-1.2.1.css" type="text/css" rel="stylesheet" />
   <script src="/Plugin/Guider/jq.guider-1.2.1.js"></script>
   

2. Create element div with id «guider»:

   <div id="guider">
   

3. Put slides items into div as span elements with class «slide»:

   <div id="guider">
   

       <span class="slide"> ... </span>
       <span class="slide"> ... </span>
   

       ...
   

       <span class="slide"> ... </span>
   

   </div>
   

4. Create tag a with class «thumb» and put navigate Url instead symbol #:

   <span class="slide">
   

       <a class="thumb" href="#">
   

           <!-- Follow code here -->
   

       </a>
   

   </span>
   

5. Input image tag as small image and span element for float explanation text:

   <span class="slide">
       <a class="thumb" href="#">
   

           <img src="/Scenes/imgx_025.jpg" width="180" height="135" />
           <span class="title">Salsa Jazz</span>
   

       </a>
   </span>
   

6. Find in file jq.guider-1.2.1.js line commented as TEMPORARY FOR DEVELOPMENT and remove follow command alert:

   var ts = $(this).find('a.thumb').attr('href') + '; ' + $(this).find('span.title').text();
   alert(ts);
   

7. Insert jQuery code for run plugin script on page loading:

   <script type="text/javascript">
       // On document ready
       $(document).ready(function () {
           // Festival scheduler loading
           $('#guider').guider(5, 5000);
       });
   </script>
   

   Note: 1st parameter 5 in «guider» method set one time slides show number; 2nd parameter 5000 set reloading time in milliseconds.