fork me on github

Configuration options

The default option values can be overridden by passing new values to the method. With these options the plugin is pretty customizable.



Option Datatype Description
autoplay Object A map of the configuration for autoplay.
Note: These options require the autoplay add-on to be included.
{
play Boolean Whether or not to autoplay.
Default value: false.
puaseOnHover Boolean Whether or not to pause on hover.
Default value: false.
timeout Number The timeout between sliding to the next slide in milliseconds.
Default value: 4000.
}
buttons Object A map of the configuration for the buttons.
Note: These options require the buttons add-on to be included.
{
prev Boolean Whether or not to add a button for sliding the gallery backward.
Default value: false if on a touch device, true otherwise.
jQuery The DOM element to use.
String A valid jQuery-selector.
String "inline" for a button inside the image.
next Boolean Whether or not to add a button for sliding the gallery forward.
Default value: false if on a touch device, true otherwise.
jQuery The DOM element to use.
String A valid jQuery-selector.
String "inline" for a button inside the image.
close Boolean Whether or not to add a button for closing the gallery.
Default value: false for an inline slider, true for a lightbox popup.
jQuery The DOM element to use.
String A valid jQuery-selector.
}
Boolean True or false for buttons.prev and buttons.next.
String "inline" for buttons.prev and buttons.next.
caption Object A map of the configuration for the caption.
Note: These options require the caption add-on to be included.
{
add Boolean Whether or not to add a caption.
Default value: false.
target jQuery The DOM element to use for the caption.
Default value: null for the default UI.
String A valid jQuery-selector.
attributes Array An array of the attributes to search for a caption.
Default value: ["title", "rel"].
}
drag Boolean Whether or not the slider should be draggable.
Default value: true if on a touch device, false otherwise.
Note: These options require the drag add-on and the Hammer.js touch-framework to be included.
effect String What effect to use for the transition.
Default value: "slide".
Possible values: "slide" and "fade".
infinite Boolean Whether or not to slide back to the first slide when the last has been reached.
Default value: false.
keys Object A map of the configuration for the keys.
Note: res the keys add-on to be included.
{
prev Boolean Whether or not to use the "LEFT" key for sliding the gallery backward.
Default value: false.
Number The keycode for the key to use.
next Boolean Whether or not to use the "RIGHT" key for sliding the gallery forward.
Default value: false.
Number The keycode for the key to use.
close Boolean Whether or not to use the "ESC" key for closing the gallery.
Default value: false.
Number The keycode for the key to use.
}
Boolean true or false for keys.prev, and keys.next and keys.close.
pagination Object A map of the configuration for the pagination.
Note: These options require the pagination add-on to be included.
{
add Boolean Whether or not to add a pagination.
Default value: false.
target jQuery The DOM element to use for the pagination.
Default value: null for the default UI.
String A valid jQuery-selector.
type String What type of pagination to use.
Default value: "bullets".
Possible values: "bullets" and "thumbnails".
anchorBuilder function A function that returns a string of HTML to use for the anchors in the pagination. This function receives one arguments: the index-number for the slide.
Note: Inside this function, this refers to the DOM element of the slide.
}
show Boolean Whether or not to immediately show the gallery after initializing.
Default value: true for an inline slider, false for a lightbox popup.
slides Object A map of the configuration for the slides.
{
visible Number The number of slides to show next to each other.
Default value: 1 if the slides.width option is not a percentage,
100 / slides.width otherwise.
slide Number The number of slides to slide.
Default value: The value for slides.visible.
width String A percentage for the width of the slides.
Default value: "100%" if the slides.visible option is undefined, 100 / slides.visible otherwise.
Number A fixed width of the slides.
offset Number The amount of whitespace on the left of the first slide.
Default value: 0.
Note: The value is used as a percentage if the slides.width option is a percentage.
load String How to (pre)load the content of the slides.
Default value: "near-visible".
Possible values: "all", "visible" and "near-visible".
Note: Only applies to lightbox popups.
scale String How to scale (image) slides.
Default value: "fit".
Possible values: "fit" for fitting the slide inside the available space,
"fill" for filling up the available space.
}
wrapper Object A map of the configuration for the wrapper.
{
classes String A collection of space-separated classnames to add to the wrapper.
Default value: "".
onClick String The behavior when clicking outside of an image.
Default value: "toggleUI".
Possible values: "toggleUI" and "close".
target jQuery The DOM element to put the slider in.
Default value: The element on which the plugin was fired (for an inline slider) if it is not an anchor, "window" (for a lightbox popup) otherwise.
String A valid jQuery-selector for an inline slider.
String "window" for a lightbox popup.
}
youtube / vimeo Object A map of the configuration for youtube/vimeo videos.
Note: These options require the youtube/vimeo add-on(s) to be included.
{
ratio Number The aspect ratio (width/height) for videos.
Default value: 16/9.
Note: To specify the ratio per slide, put the value in the data-tos-ratio attribute of the anchor.
maxWidth Number The maximum width for videos.
Default value: The innerWidth of the slide it is in.
Note: To specify the maxWidth per slide, put the value in the data-tos-maxWidth attribute of the anchor.
maxHeight Number The maximum height for videos.
Default value: The innerHeight of slide it is in.
Note: To specify the maxHeight per slide, put the value in the data-tos-maxHeight attribute of the anchor.
imageLink Boolean Whether or not to show a preview with play-button instead of the actual video.
Default value: true if on a touch device, false otherwise.
Note: Only available for YouTube video's.
}


Desktop and touch device configuration

As you probably know, a website on a desktop is just not the same as a website on a tablet or smartphone. Therefore all the options specified in the configuration object can be overriden for both desktop and touch device. Like this:

$("#foo a").tosrus({
	//	default options (for both desktop and touch-devices)
}, {
	//	options only for desktop
}, {
	//	options only touch-devices
});