A Mootools plugin that supplies a thumbnail slider
JavaScript PHP
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



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

Screenshot 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:


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

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 */},{
	movement : 7,
	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



  • 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


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