Bubbles

First vertical animated ticker JQuery plugin

Plugin created special for official site of annual Jerusalem's Traditional Jazz Festival «Jazz Globus» in 2014, but used in other projects.
Show serial items set with top item loading event. Allowed subset size setting and change subset time-out.
Requirements: JQuery 1.10.1 or later, IE 9 or later / Chrome / Mozilla. Version for JQuery 2.0.0 is proposal.
Correctly support up to 7 slides in row and 20 items total.
Open to development and customization. Free for personal use. Download here.

Implementation example:

  1. Append to page references to 2 required plugin files as:
    <link href="/Plugin/Bubbles/jq.bubbles-1.0.1.css"
        type="text/css" rel="stylesheet" />
    <script src="/Plugin/Bubbles/jq.bubbles-1.0.1.js"></script>
    
  2. Create element div with id «bubbles»:
    <div id="bubbles">
    
  3. Put slides items into div as span elements with class «slide»:
    <div id="bubbles">
    
        <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(s) for float explanation text:
    <span class="slide">
        <a class="thumb" href="#">
    
            <img src="/Scenes/imgx_013.jpg" width="175" height="117" />
            <span class="title">Rejwan
                <span class="subtitle">Travel service</span>
            </span>
    
        </a>
    </span>
    
  6. Find in file jq.bubbles-1.0.1.js line commented as TEMPORARY FOR DEVELOPMENT and remove follow command alert:
    var tc = $(this).find('a.thumb').attr('href') + '; ' 
        + $(this).find('span.title').text();
    alert(tc);
    
  7. Insert jQuery code for run plugin script on page loading:
    <script type="text/javascript">
        // On document ready
        $(document).ready(function () {
            // Bubbles ticker loading
            $('#bubbles').bubbles(3000, 5);
        });
    </script>
    
    Note: 1st parameter 3000 (default is 5000) in «bubbles» method set slides move timeout in milliseconds; 2nd parameter 5 (default is 5) set one time slides show number.
Return to plugins list
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 ● warshavsky@gmail.com ● ©2005-