Swipebox A Touchable jQuery Lightbox Examples
Download This Plugin Back To jQueryScript
A touchable jQuery lightbox
What is Swipebox ?
Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet.
Features
- Swipe gestures for mobile
- Keyboard Navigation for desktop
- CSS transitions with jQuery fallback
- Retina support for UI icons
- Easy CSS customization
Compatibility
Chrome, Safari, Firefox, Opera, IE, iOS, Android, Windows Phone.
Try it
Usage
Javascript
Include jquery and the swipebox script in your head
tags or right before your body
closing tag.
<script src="lib/jquery.min.js"></script> <script src="source/jquery.swipebox.min.js"></script>
CSS
Include the swipebox CSS style in your head
tags.
<link rel="stylesheet" href="source/swipebox.css">
HTML
Use a specific class for your links and use the title attribute as caption.
<a href="big/image.jpg" class="swipebox" title="My Caption"> <img src="small/image.jpg" alt="image"> </a>
Fire the plugin
Bind the swipebox behaviour on every link with the "swipebox" class.
<script type="text/javascript"> jQuery(function($) { $(".swipebox").swipebox(); }); <script>
Need a couple of options?
<script type="text/javascript"> jQuery(function($) { $(".swipebox").swipebox({ useCSS : true, // false will force the use of jQuery for animations hideBarsDelay : 3000 // 0 to always show caption and action bar }); }); <script>