Touchable jQuery Lightbox Plugin - swipebox

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

swipebox is a jQuery plugin that makes it possible to create 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+, IOS4+, Android, windows phone.

How to use it:

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

<link rel="stylesheet" href="source/swipebox.css">

2. Add a link with a specific class

<a href="https://www.jqueryscript.net" class="swipebox" title="Caption"> <img src="YOUR IMAGE" alt=""></a>

3. Include jQuery library and swipebox.js

<script src="lib/jquery-1.9.0.min.js"></script> 
<script src="source/jquery.swipebox.min.js"></script> 

4. Include ios-orientationchange-fix.js to fix the iOS orientationchange zoom bug (OPTIONAL)

<script src="lib/ios-orientationchange-fix.js"></script> 

5. Call the plugin

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

6. More Options

$(".swipebox").swipebox({

  // false will force the use of jQuery for animations
  useCSS : 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, 

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

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

  // videos max width
  videoMaxWidth : 1140, 

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

  // called after opening
  afterOpen: null, 

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

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

  // 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: '',

  useSVG: true
  
});

Change log:

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.