Responsive & Touch Optimized jQuery Slider Plugin - TosRUs

TosRUs (Touch Optimized Sliders "R"Us) is a jQuery plugin used to create a responsive, touch-enabled and multipurpose slider that support any type of html elements.

TosRUs plugin allows you to create:

• A content lightbox with a slider when clicking a thumbnail.
• An inline slider with arrow navigation.
• An inline gallery with thumbnail navigation.

Basic Usage:

1. Include the latest jQuery javascript library on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Include jQuery TosRUs plugin files after jQuery library.

<script type="text/javascript" language="javascript" src="src/js/jquery.tosrus.min.js"></script>
<link type="text/css" media="all" rel="stylesheet" href="src/css/jquery.tosrus.css" />

3. Include hammer.js for touch events (drag, swipe, pinch, etc).

<script type="text/javascript" language="javascript" src="lib/jquery.hammer.min.js"></script>

4. Include FlameViewportScale.js for viewport-scale dependent buttons and captions.

<script type="text/javascript" language="javascript" src="lib/FlameViewportScale.js"></script>

5. Create a group of thumbnails. Clicking a thumbnail will open up a lightbox popup with a slider for the enlarged images.

<div class="thumbs"> 
<a href="img/large/1.jpg" title="Title 1"> <img src="img/square/1.jpg" /></a> 
<a href="img/large/2.jpg" title="Title 2"> <img src="img/square/2.jpg" /></a> 
<a href="img/large/3.jpg" title="Title 3"> <img src="img/square/s3.jpg" /></a> 
<a href="img/large/4.jpg" title="Title 4"> <img src="img/square/4.jpg" /></a> 
</div>

6. Initialize the plugin with default configurations.

<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.thumbs a').TosRUs();
});
</script>

7. All the options.

<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.thumbs a').TosRUs({
show: false, // Whether or not to immediately show the gallery after initializing.
touch: { // A map of the configuration for touch-events.
drag: false, // Whether or not the slider should be draggable.
zoom: false // Whether or not doubletab and pinch gestures should zoom images.
},
buttons: true, // Whether or not use buttons for sliding and closing the slider/gallery.
keys: false, // Whether or not use keys for sliding and closing the slider/gallery.
caption: ["rel", "title"], // An array of the attributes to search for text.
Default value: False if the wrapper.target option is specified (for an inline gallery), ["title", "rel"] otherwise.
wrapper: { // A map of the configuration for the wrapper.
target: 'window',
css: {
}
},
slides: { // A map of the configuration for the slides.
width: '100%', // A percentage for the width of the slides.
visible: 1, // The number of slides to show next to each other.
collect: true, // Whether or not to collect the slides from the href attribute of the anchors
offset: 0, // The amount of whitespace left of the first slide.
scale: 'fit', // How to scale the slides. fit or fill.
css: {
}
},
anchors: { // A map of the configuration for the anchors.
event: "click",
zoomIcon: true,
css: {
}
},
prev: { // A map of the configuration that slides the slider backward.
slides: 1, // The number of slides to slide backward.
button: true, // Whether or not create a button for sliding backward.
key: false // Whether or not to slide backward when pressing the left-key.
},
next: { // A map of the configuration for sliding forward.
slides: 1,
button: true,
key: false
},
close: { // A map of the configuration for closing the gallery.
button: true,
key: false
},
video: { // A map of the configuration for videos.
ratio: 16 / 9, // The aspect ratio (width/height) for videos.
maxWidth: false,
maxHeight: false,
imageLink: true // Whether or not to show a preview with play-button instead of the actual video.
}
});
});
</script>

Change logs:

v2.5.0 (2016-06-24)

• switched to using gulp

v2.4.2 (2015-11-03)

• update.

v2.4.1 (2015-06-30)

• update.

v2.4.0 (2015-02-20)

• update.

v2.2.3 (2014-12-09)

• fixed touch detection.

v2.2.2 (2014-11-29)

• Extended media detection with custom function

v2.2.2 (2014-10-27)

• bugfix keys add-on

v2.2.1 (2014-09-27)

• Moved to using Hammer v2 + small fixes

v2.2.0 (2014-09-25)

• Moved to using Hammer v2 + small fixes

v2.1.4 (2014-06-25)

• Added option wrapper.onClick

v2.1.3 (2014-06-25)

• youtube pause fix

v2.1.2 (2014-04-06)

• small fix.

v2.1.1 (2014-03-25)

• loaded callback event

v2.1.0 (2014-03-12)

• New version !

v2.0.1 (2014-03-06)

• opacity inline button

v2.0 (2014-02-21)

• New version !

---

This awesome jQuery plugin is developed by BeSite. For more Advanced Usages, please check the demo page or visit the official website.