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">
</a>

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>

<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>

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

...

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

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

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

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

jQuery(function($) {
  $(".swipebox").swipebox();
});

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

$(".swipebox").swipebox([
  { href:'image-1.jpg', title:'Caption 1' }, 
  { href:'image-2.jpg', title:'Caption 2' },
  // ...
]);

8. Full plugin options to customize the lightbox.

$(".swipebox").swipebox({

  // 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
  
});

Changelog:

2021-01-23

• jQuery.isArray is deprecated; use Array.isArray

2021-01-08

• v1.5.1

2021-01-06

• Updated for jQuery 3.4+

2016-03-15

• v1.4.4

2014-09-15

• Improved UI

2014-07-07

• support for any url with variable swipeboxVideo=1

2014-04-07

• Added hideBarsOnMobile option, clean up

2014-04-04

• Added options to disable SVG and fixed IE bug

2014-03-14

• Detect touchable device with user agent AND touch event check

2013-03-14

• 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.