How to use

The class is very strict about its class. To make sure you use it correctly, i suggest you use the CSS files that come with the library. In case you want to write up your own class, these are the must have classes:

• 'thumbs-list' : the thumb's UL element
• 'thumb' : the thumb's LI element
• 'list-container' : the list container element (the one that will contain the entire widget)
• 'subcontainer' : the element that will parent the list itself - This Element's width will be the carrusell's width - so set it!
• 'rightButton' : the 'next' button
• 'leftButton' : the 'previous' button
• 'current' : the current selected thumb

The class can work in 2 different scenarios:

• Generate the carusel from an image list
• Generate the list from a json image li.

If you use the image list, it needs to be structured like this:

HTML

<ul>
    <li class='thumb'>
        <a href='#'>
            <img src='some-image.png' height:'10px' width:'10px' /></a>
    </li>
</ul>

The 'IMG' tag must have a width and a height applied.

The JSON object should be an Array and structured like this:

{
    { //a thumbnail:
        source : '', //a source for the anchor
        description : '', //a title for the anchor
        src : '', //thumbnail source
        width: 0, //thumbnail width - optional
        height: 0, //thumbnail height - optional
        alt: '' //an alt for the image
    }
}

To generagte the carousel from a list call it like this:

var slides = new ThumbsSlides($('image-list'),{/* options */});

To generate from JSON use:

var slides = new ThumbsSlides({/* JSON object */},{/* options */});

There is also now an option to use an AJAX loader for this class like this:

var slides = new AJAXThumbs({/* JSON object */},{
    thumbSize:64,
    useItemClass:true,
    movement : 7,
    url:'get_thumbs.php',
    start:14, //how many thumbs are already loaded
    loadNumber : 7,
    requestEvents : {
        'request' : function(){console.log('started fetching');},
        'success' : function(){console.log('images fetched');}
    }
});

The class will stop loading when recieving an empty object/array from the response.

Methods

• next(int) : move int tiles farward
• prev(int) : move int tiles backwards
• nextItem : move the current focus to the next item
• prevItem : move the current focus to the previous item

Options

ThumbsSlides:

• parent : what element to append the list to (default to 'body')
• movement : how many thumbs to slide with each movement (deafult is to list visible width)
• itemClass : the class of the list item (default: 'thumb')
• useItemClass : whether or not to use the itemClass to calculate list-items dimentions (false is very resource-expensive),
• anchorClasses : what class to append to the anchr when generating from JSON (improtant if you want to incorparate with a lightbox class)
• rtl : whether to use a right-to-left version or not (defualt to false).
• listClass : a class to set for the thumbs-list (default to thumbs-list)
• itemsPerRow : how many items to show in the viewport

AJAXThumbs:

• url : a url for the request - Required
• loadNumber : how many thumbs to lad on each request - Required
• paramName : a paramater name to send with the request containing the current loaded thumbs number (default : 'start')
• start : how many thumbs to skip on the first request (will be added to loadNumber on first call. default: 0)
• mehod : method for the request. (default:'post')
• requestEvents : events to send to the request

Events

• complete : List was generated successfuly
• nextComplete: next effect finished
• prevComplete: prev effect finished

Css

The class comes with a base CSS file that you should always use - thumbs-base.css, and additional ones that set some basic dimensions for various thumbs sizes. The basic style comes with a default buttons style, but you can overwrite it. Also, you can look at the demo css to see some further styling.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.