Chooser2

Vertical animated ticker plugin for JQuery 2

Plugin created for Irena Warshavsky Studio collection in 2015 for improving previous «Chooser» plugin and migration to jQuery 2 library.
Show serial items set with top item loading event. Allowed subset size setting and change subset time-out.
Requirements: JQuery 2.0.3 or later, backward compatible for 1.10.1 or later, IE 9 or later / Chrome / Mozilla.
Correctly support up to 10 slides in one column and 40 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/Chooser2/jq.chooser2-1.2.1.css"
        type="text/css" rel="stylesheet" />
    <script src="/Plugin/Chooser2/jq.chooser2-1.2.1.js"></script>
    
  2. Create element div with id «chooser»:
    <div id="chooser">
    
  3. Put slides items into div as span elements with class «slide»:
    <div id="chooser">
    
        <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_006.jpg" width="180" height="135" />
            <span class="title">Gilad Dobrezky</span>
    
        </a>
    </span>
    
  6. Find in file jq.chooser2-1.2.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 () {
            // Chooser ticker loading
            $('#chooser2').play(4, 3000);
        });
    </script>
    
    Note: 1st parameter 4 (default is 5) in «play» method set one time slides show number. 2nd parameter 3000 (default is 2500) set slides move timeout in milliseconds;
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-