useful touchable jQuery lightbox plugin
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, IE8+, IOS4+, Android, windows phone.
Javascript
Include jquery and the swipebox script in your head
tags or right before your body
closing tag.
<script src="lib/jquery-1.9.0.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>
The article source:http://brutaldesign.github.io/swipebox/
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu