A one-stop-shop jQuery plugin for scrolling/swiping through all different kinds of content. On a desktop, tablet or smartphone, inside a HTML element or as a lightbox popup.

Features:

• Responsive CSS interface for sizing and positioning.
• Creates lightbox galleries just as easy as “inline” sliders.
• Drag or swipe to slide to the next/previous slide(s).
• Doubletab or pinch to zoom on images.
• Slides are automatically grouped into a gallery.
• Works just as well on a desktop as it does on a tablet or smartphone.
• Very customizable through a series of options with device dependent defaults.
• Viewport-scale dependent buttons and caption sizes.
• Currently supports showing images, video’s and HTML content.
• Optimized preloading content; not too soon, not too late.
• Retina ready.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

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

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

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

Optionally include the jquery.hammer.js framework to add support for touch gestures.

<script type="text/javascript" src="path/to/jquery.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>