fork me on github

Installing the plugin

The jQuery Tos "R"Us plugin is pretty easy to install and setup, just follow the steps below and you should be OK.



Including the .js- and .css-files

The plugin is split up into separate .js- and .css-files for core functionallity, add-ons and media. It is recommended to include the minified ".all" .js- and .css-files.

Don't forget to also include jQuery.

<script type="text/javascript" src="path/to/jquery.js"></script>

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

Optionally include the Hammer.js touch-framework to add support for touch gestures.

<script type="text/javascript" src="path/to/hammer.js"></script>

Lightbox popups

Create anchors (<a />-tags) whose href attributes link to the the element you want to open with Tosrus. You can link to images, video's or DOM elements.

<div id="links">
   <a href="path/to/large/image.jpg">View image.</a>
   <a href="http://www.youtube.com/watch?v=video_id">View YouTube video.</a>
   <a href="#hidden_div">View hidden content.</a>
</div>

Optionally add a title-attribute to the anchor to use as a caption.

<a href="path/to/large/image.jpg" title="Caption for the image">View image.</a>

Fire the plugin "onDocumentReady" using a selector that targets the anchors.

<script type="text/javascript">
   $(document).ready(function() {
      $("#links a").tosrus();
   });
</script>

Inline sliders

Create images, video's or DOM elements in a "wrapper".

<div id="wrapper">
   <img src="path/to/image.jpg" />
   <iframe src="//www.youtube.com/embed/video_id" frameborder="0"></iframe>
   <div>Some inline content.</div>
</div>

Fire the plugin "onDocumentReady" using a selector that targets the "wrapper".

<script type="text/javascript">
   $(document).ready(function() {
      $("#wrapper").tosrus();
   });
</script>

Options & events

Try some of the configuration options to make the plugin fit your needs.
After the plugin has been fired, there are a series of custom events you can use to control the slider.

<script type="text/javascript">
   $(document).ready(function() {
      $("#wrapper").tosrus({
         //   configuration options go here
      }).trigger( "next" );
   });
</script>