Collection group viewer JQuery plugin

Plugin created special for official site of annual Jerusalem's Traditional Jazz Festival «Jazz Globus» in 2013-2015.
Show serial items subset from specified items set. Allowed subset size setting and change subset time-out.
Requirements: JQuery 1.10.1, 2.0.3 or later; browsers: IE (9 or later) / Chrome / Mozilla.
Correctly support up to 5 slides in row and 40 items total.
Open to development and customization. Free for personal use. Download here.
Load slide #
Over slide #
Return to plugins list

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">
  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>
  4. Create tag a with class «thumb» and put navigate Url instead symbol #:
    <span class="slide">
        <a class="thumb" href="#5">
            //-- Follow code here --//
  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>
  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);
    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.
Very easy implements on ASP.Net or MVC platforms. You can also customize this plugin.
We not recommend to change jQuery code, but you can change styles in CSS file or use additional CSS for overwrite styles.
Irena Warshavsky Studio ● Rishon Le-Zion, Israel ● (972-54) 520-45-65 ● ● ©2005-