## What is Swipebox ?

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.

## 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-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>

Download View Source

Credits

Photos by Daniele Zedda