README.md
71 lines
| 1 | Swipebox |
| 2 | ================================ |
| 3 | |
| 4 | A touchable jQuery lightbox. |
| 5 | |
| 6 | [](http://brutaldesign.github.com/swipeboxView project page](http://brutaldesign.github.com/swipebox](http://brutaldesign.github.com/swipebox) |
| 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 | |
| 20 | ###Compatibility |
| 21 | |
| 22 | Chrome, Safari, Firefox, Opera, IE8+, IOS4+, Android, windows phone. |
| 23 | |
| 24 | ##Usage |
| 25 | |
| 26 | ###Javascript |
| 27 | |
| 28 | Include jquery and the swipebox script in your head tags or right before your body closing tag. |
| 29 | |
| 30 | ```html |
| 31 | <script src="lib/jquery-1.9.0.js"></script> |
| 32 | <script src="source/jquery.swipebox.js"></script> |
| 33 | ``` |
| 34 | |
| 35 | ###CSS |
| 36 | |
| 37 | Include the swipebox CSS style in your head tags. |
| 38 | |
| 39 | ```html |
| 40 | <link rel="stylesheet" href="source/swipebox.css"> |
| 41 | ``` |
| 42 | |
| 43 | ###HTML |
| 44 | |
| 45 | Use a specific class for your links and use the title attribute as caption. |
| 46 | |
| 47 | ```html |
| 48 | <a href="big/image.jpg" class="swipebox" title="My Caption"> |
| 49 | ``` |
| 50 | |
| 51 | ###Fire the plugin |
| 52 | |
| 53 | Bind the swipebox behaviour on every link with the "swipebox" class. |
| 54 | |
| 55 | ```javascript |
| 56 | $(".swipebox").swipebox(); |
| 57 | ``` |
| 58 | |
| 59 | ###Options |
| 60 | |
| 61 | ```javascript |
| 62 | useCSS : true, // false will force the use of jQuery for animations |
| 63 | hideBarsDelay : 3000, // 0 to always show caption and action bar |
| 64 | videoMaxWidth : 1140, // videos max width |
| 65 | beforeOpen: function(){} , // called before opening |
| 66 | afterClose: function(){} // called after closing |
| 67 | ``` |
| 68 | |
| 69 | ####Credits |
| 70 | Photos by [](http://www.flickr.com/photos/astragony/Daniele Zedda](http://www.flickr.com/photos/astragony/](http://www.flickr.com/photos/astragony/) |
| 71 |