fork me on github

Lightbox popup examples

Fire the plugin on a (set of) thumbnail(s) and it will create a lightbox popup with a slider for the enlarged images.

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


Image gallery
By default, the plugin will automatically create a gallery from the targeted anchors:

$("#example a").tosrus();


Single images
This lightbox has been set up to create a new popup for each anchor:

$("#example a").each(
   function()
   {
      $(this).tosrus({
         buttons : false
      });
   }
);


Full screen images
This lightbox has been set up so that the images fill up the entire screen, it also has captions and a thumbnail pagination, but no buttons:

$("#example a").tosrus({
   slides     : {
      scale      : "fill"
   },
   caption    : {
      add        : true
   },
   pagination : {
      add        : true,
      type       : "thumbnails"
   },
   buttons    : false
});


Inline buttons and fade effect
This lightbox will fade instead of slide and has buttons on the inside of each image. It also has a bullet pagination and some additional CSS:

$("#example a").tosrus({
   effect     : "fade",
   buttons    : "inline",
   pagination : {
      add        : true
   },
   wrapper    : {
      classes    : "img-border"
   }
});


Other types of content
Besides images, you can also scroll through YouTube and Vimeo video's and any other type of HTML:

$("#example a").tosrus();


Inline slider examples

Fire the plugin on a "wrapper" with existing content, and the popup gallery is replaced with an inline slider.
Just like the lightbox popup, the slides in this slider are responsive by default.

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


Multiple slides
This slider has been set up to show three slides and is infinite:

$("#example").tosrus({
   infinite : true,
   slides   : {
      visible  : 3
   }
});


Fill up the available space
This slider has been set up to so that the images fill up the wrapper. It has no buttons, only a bullet pagination and slides automatically:

$("#example").tosrus({
   autoplay   : {
      play       : true
   },
   slides     : {
      scale      : "fill"
   },
   buttons    : false,
   pagination : {
      add        : true
   }
});


Other types of content
Besides images, you can also scroll through YouTube and Vimeo video's and any other type of HTML:

$("#example").tosrus();