Touchable jQuery Lightbox Plugin swipebox - Free Download Touchable jQuery Lightbox Plugin - swipebox

Free Download Touchable jQuery Lightbox Plugin – swipebox

By Posted on

This time I will share jQuery Plugin and tutorial about Touchable jQuery Lightbox Plugin – swipebox, hope it will help you in programming stack.

File Size: 1.33 MB
Views Total: 12277
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <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:

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

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

view source
1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <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.

view source
01 <a href="/path/to/full-1.jpg" class="swipebox" title="Caption Here" rel="gallery">
02   <img src="/path/to/thumb-1.jpg" alt="Image Alt">
03 </a>
04  
05 <a href="/path/to/full-2.jpg" class="swipebox" title="Caption Here" rel="gallery">
06   <img src="/path/to/thumb-2.jpg" alt="Image Alt">
07 </a>
08  
09 <a href="/path/to/full-3.jpg" class="swipebox" title="Caption Here" rel="gallery">
10   <img src="/path/to/thumb-3.jpg" alt="Image Alt">
11 </a>
12  
13 ...

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

view source
1 <a class="swipebox" rel="viemo" href="/path/to/vimeoVideo">
2   Vimeo Video
3 </a>
4  
5 <a class="swipebox" href="/path/to/youtubeVideo">
6   Vimeo Video
7 </a>

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

view source
1 jQuery(function($) {
2   $(".swipebox").swipebox();
3 });

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

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

8. Full plugin options to customize the lightbox.

view source
01 $(".swipebox").swipebox({
02  
03   // false will force the use of jQuery for animations
04   useCSS : true,
05  
06   // false to force the use of png for buttons
07   useSVG: true,
08  
09   // which image index to init when a array is passed
10   initialIndexOnArray: 0,
11  
12   // false will show top navigation bar on mobile devices
13   removeBarsOnMobile : true,
14  
15   // true will hide the close button on mobile devices
16   hideCloseButtonOnMobile : false,
17  
18   // delay before hiding bars on desktop
19   hideBarsDelay : 3000,
20  
21   // videos max width
22   videoMaxWidth : 1140,
23  
24   // true will return to the first image after the last image is reached
25   loopAtEnd: false,
26  
27   // true will autoplay Youtube and Vimeo videos
28   autoplayVideos: false,
29  
30   // plain object with custom query string arguments to pass/override for video URLs,
31   queryStringData: {},
32  
33   // CSS class that can be toggled when the slide will be loaded (like 'hidden' of <a href="https://www.jqueryscript.net/tags.php?/Bootstrap/">Bootstrap</a>)
34   toggleClassOnLoad: '',
35  
36   // callbacks
37   // called before opening
38   beforeOpen: function(){} ,
39  
40   // called after opening
41   afterOpen: null,
42  
43   // called after closing
44   afterClose: function(){},
45  
46   // called after media is loaded
47   afterMedia: function(){},
48  
49   // called after going to next/prev slide
50   nextSlide: null,
51   prevSlide: null
52    
53 });

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

 

Related posts: