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

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.