Submit your widget

useful touchable jQuery lightbox plugin

Created 11 years ago   Views 12666   downloads 2425    Author brutaldesign
useful touchable jQuery lightbox plugin
View DemoDownload
38
Share |

Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet.

Features

  1. Swipe gestures for mobile
  2. Keyboard Navigation for desktop
  3. CSS transitions with jQuery fallback
  4. Retina support for UI icons
  5. 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/

Tag: lightbox