Submit your widget

A touchable jQuery lightbox

Created 2 years ago   Views 12355   downloads 3185    Author brutaldesign
A touchable jQuery lightbox
View DemoDownload 65.9 KB
21
Share |

What is Swipebox ?

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

 

Main 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, IE9+, IOS4+, Android, windows phone.

Javascript

Include jquery and the swipebox script in your head tags or right before yourbody closing tag.

<script src="lib/jquery-2.0.3.js"></script>
<script src="src/js/jquery.swipebox.js"></script>

CSS

Include the swipebox CSS style in your head tags.

<link rel="stylesheet" href="src/css/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">
;( function( $ ) {

	$( '.swipebox' ).swipebox();

} )( jQuery );
</script>

Read more:http://brutaldesign.github.io/swipebox/

Tag: lightbox