This Library supplies 2 Class:
- ThumbsSlides : creates a thumbnail carousel slider out of a list of images.
- AJAXSlides : create the carousel using AJAX.
NOTE the demo page can't show the AJAX because of the static nature of GH-Pages. but you can see it using the downloadable demo
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
#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:
#JS
{
{ //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:
#JS
var slides = new ThumbsSlides($('image-list'),{/* options */});
To generate from JSON use:
#JS
var slides = new ThumbsSlides({/* JSON object */},{/* options */});
There is also now an option to use an AJAX loader for this class like this:
#JS
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.
- 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
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
- complete : List was generated successfuly
- nextComplete: next effect finished
- prevComplete: prev effect finished
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.