Horizontal animated catalog navigator JQuery plugin

Plugin created special for official site of annual Jerusalem's Traditional Jazz Festival «Jazz Globus» in 2013-2015.
Show randomal 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.
Return to plugins list

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>
  4. Create tag a with class «thumb» and put navigate Url instead symbol #:
    <span class="slide">
        <a class="thumb" href="#">
            <!-- Follow code here -->
  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>
  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();
  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);
    Note: 1st parameter 5 in «guider» method set one time slides show number; 2nd parameter 5000 set reloading time in milliseconds.
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-