Touchable jQuery Lightbox Plugin - swipebox

File Size: 1.33 MB
Views Total: 16643
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Touchable jQuery Lightbox Plugin - swipebox

swipebox is a jQuery plugin that makes it possible to create a highly customizable and touchable lightbox for desktop, mobile, and tablet.

It supports swipe gestures, keyboard navigation, CSS transitions, retina and is compatible with Chrome, Safari, Firefox, Opera, IE8+, iOS+, Android, and Windows Phone.

How to use it:

1. Include the swipebox CSS in your page's head section.

<link rel="stylesheet" href="/path/to/src/css/swipebox.min.css" />

2. Add a link to your thumbnail image and define the image caption in the title attribute:

<a href="/path/to/full.jpg" class="swipebox" title="Caption Here">
  <img src="/path/to/thumb.jpg" alt="Image Alt">

3. Include jQuery library and the swipebox.js plugin on the page.

<script src="/path/to/cdn/jquery.min.js"></script> 
<script src="/path/to/src/js/jquery.swipebox.min.js"></script> 

4. To create a gallery lightbox, make sure all links have the same rel value.

<a href="/path/to/full-1.jpg" class="swipebox" title="Caption Here" rel="gallery">
  <img src="/path/to/thumb-1.jpg" alt="Image Alt">

<a href="/path/to/full-2.jpg" class="swipebox" title="Caption Here" rel="gallery">
  <img src="/path/to/thumb-2.jpg" alt="Image Alt">

<a href="/path/to/full-3.jpg" class="swipebox" title="Caption Here" rel="gallery">
  <img src="/path/to/thumb-3.jpg" alt="Image Alt">


5. Not only image, the plugin supports Youtube or Vimeo videos:

<a class="swipebox" rel="viemo" href="/path/to/vimeoVideo">
  Vimeo Video

<a class="swipebox" href="/path/to/youtubeVideo">
  Vimeo Video

6. Call the plugin on the image or video links and done.

jQuery(function($) {

7. You are also allowed to load images into the lightbox via JavaScript:

  { href:'image-1.jpg', title:'Caption 1' }, 
  { href:'image-2.jpg', title:'Caption 2' },
  // ...

8. Full plugin options to customize the lightbox.


  // false will force the use of jQuery for animations
  useCSS : true, 

  // false to force the use of png for buttons
  useSVG: true,

  // which image index to init when a array is passed
  initialIndexOnArray: 0, 

  // false will show top navigation bar on mobile devices
  removeBarsOnMobile : true, 

  // true will hide the close button on mobile devices
  hideCloseButtonOnMobile : false, 

  // delay before hiding bars on desktop
  hideBarsDelay : 3000, 

  // videos max width
  videoMaxWidth : 1140, 

  // true will return to the first image after the last image is reached
  loopAtEnd: false, 

  // true will autoplay Youtube and Vimeo videos
  autoplayVideos: false,

  // plain object with custom query string arguments to pass/override for video URLs,
  queryStringData: {},

  // CSS class that can be toggled when the slide will be loaded (like 'hidden' of Bootstrap)
  toggleClassOnLoad: '',

  // callbacks
  // called before opening
  beforeOpen: function(){} , 

  // called after opening
  afterOpen: null, 

  // called after closing
  afterClose: function(){}, 

  // called after media is loaded
  afterMedia: function(){}, 

  // called after going to next/prev slide
  nextSlide: null,
  prevSlide: null



  • jQuery.isArray is deprecated; use Array.isArray


  • v1.5.1


  • Updated for jQuery 3.4+


  • v1.4.4


  • Improved UI


  • support for any url with variable swipeboxVideo=1


  • Added hideBarsOnMobile option, clean up


  • Added options to disable SVG and fixed IE bug


  • Detect touchable device with user agent AND touch event check


  • Improved bar animation and gesture detection


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