ThumbsSlides

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

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

#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.

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.