Ghosts

Implementation example:

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

   <link href="/Plugin/Ghosts/jq.ghosts-1.2.0.css"
       type="text/css" rel="stylesheet" />
   <script src="/Plugin/Ghosts/jq.ghosts-1.2.0.js">
       </script>
   

2. Create element div with id «ghosts»:

   <div id="ghosts">
   

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

   <div id="ghosts">
   

       <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="#5">
           //-- 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="#5">
   

           <img src="/Scenes/imgx_061.jpg" />
           <span class="title">Kathy Kosins</span>
   

       </a>
   </span>
   

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

   alert(_e.find('a.thumb').attr('href') + '; ' + _e.find('span.title').text());
   

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

   <script type="text/javascript">
       // On document ready
       $(document).ready(function () {
           // Ghosts viewer loading
           $('#ghosts').ghosts(4000, 8);
       });
   </script>
   

   Note: 1st parameter 4000 (default is 5000) in «ghosts» method set slides swap timeout in milliseconds; 2nd parameter 8 (default is 6) set slide one time show number.