img
11 years ago
README.md
4 years ago
jquery.swipebox.js
10 months ago
jquery.swipebox.min.js
10 months ago
swipebox.css
4 years ago
swipebox.min.css
4 years ago
README.md
90 lines
| 1 | Swipebox |
| 2 | ================================ |
| 3 | |
| 4 | A touchable jQuery lightbox. |
| 5 | |
| 6 | [](https://swipebox.codes/View project page](https://swipebox.codes/](https://swipebox.codes/) |
| 7 | |
| 8 | ## What is Swipebox ? |
| 9 | |
| 10 | Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. |
| 11 | |
| 12 | ## Features |
| 13 | |
| 14 | - Swipe gestures for mobile |
| 15 | - Keyboard Navigation for desktop |
| 16 | - CSS transitions with jQuery fallback |
| 17 | - Retina support for UI icons |
| 18 | - Easy CSS customization |
| 19 | - Video, Images and Inline content |
| 20 | |
| 21 | ### Compatibility |
| 22 | |
| 23 | Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone. |
| 24 | |
| 25 | ## Usage |
| 26 | |
| 27 | ### Javascript |
| 28 | |
| 29 | Include jquery and the swipebox script in your head tags or right before your body closing tag. |
| 30 | |
| 31 | ```html |
| 32 | <script src="lib/jquery-3.5.2.js"></script> |
| 33 | <script src="src/js/jquery.swipebox.js"></script> |
| 34 | ``` |
| 35 | |
| 36 | ### CSS |
| 37 | |
| 38 | Include the swipebox CSS style in your head tags. |
| 39 | |
| 40 | ```html |
| 41 | <link rel="stylesheet" href="src/css/swipebox.css"> |
| 42 | ``` |
| 43 | |
| 44 | ### HTML |
| 45 | |
| 46 | Use a specific class for your links and use the title attribute as caption. |
| 47 | |
| 48 | ```html |
| 49 | <a href="big/image.jpg" class="swipebox" title="My Caption"> |
| 50 | ``` |
| 51 | |
| 52 | ### Fire the plugin |
| 53 | |
| 54 | Bind the swipebox behaviour on every link with the "swipebox" class. |
| 55 | |
| 56 | ```javascript |
| 57 | $( '.swipebox' ).swipebox(); |
| 58 | ``` |
| 59 | |
| 60 | ### Options |
| 61 | |
| 62 | ```javascript |
| 63 | useCSS : true, // false will force the use of jQuery for animations |
| 64 | initialIndexOnArray: 0, // which image index to init when a array is passed |
| 65 | removeBarsOnMobile : true, // false will show top navigation bar on mobile devices |
| 66 | hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices |
| 67 | removeBarsOnMobile : true, // false will show bottom bar on mobile devices |
| 68 | hideBarsDelay : 3000, // delay before hiding bars on desktop |
| 69 | videoMaxWidth : 1140, // videos max width |
| 70 | beforeOpen: function(){} , // called before opening |
| 71 | afterOpen: null, // called after opening |
| 72 | afterClose: function(){}, // called after closing |
| 73 | afterMedia: function(){}, // called after media is loaded |
| 74 | loopAtEnd: false, // true will return to the first image after the last image is reached |
| 75 | autoplayVideos: false // true will autoplay Youtube and Vimeo videos |
| 76 | queryStringData: {} // plain object with custom query string arguments to pass/override for video URLs, |
| 77 | toggleClassOnLoad: '' // CSS class that can be toggled when the slide will be loaded (like 'hidden' of Bootstrap) |
| 78 | useSVG: true |
| 79 | nextSlide: function(){} // called on next slide, works for next button, arrow keys and touch navigation |
| 80 | prevSlide: function(){} // called on previous slide, works for previous button, arrow keys and touch navigation |
| 81 | ``` |
| 82 | |
| 83 | ### Pull Requests |
| 84 | |
| 85 | I want to keep this plugin as simple as possible. I won't merge pull requests for additional features such as download buttons, social like buttons, IE8 compatibility etc... But feel free to fork the project and customize it to suit to your needs. Most wanted PR are for bug fixes. Also, a future improvement will be to allow zoom on touchable devices. |
| 86 | |
| 87 | If you want to submit a pull request please be sure to grunt the whole thing (mostly jshintrc validation and minified file) and send me a demo URL. Also, please comment your code. |
| 88 | |
| 89 | Thanks for your understanding and thank you all for your helpful support! |
| 90 |