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

## Basic Usage

### Javascript

Include jquery and the swipebox script in your `head` tags or right before your `body` 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>

## Advanced

### Gallery

You can add a `rel` attribute to your links to seperate your galleries.

    <!-- Gallery 1 -->
    <a rel="gallery-1" href="big/image1.jpg" class="swipebox">
    	<img src="small/image1.jpg" alt="image">
    </a>
    <a rel="gallery-1" href="big/image2.jpg" class="swipebox">
    	<img src="small/image2.jpg" alt="image">
    </a>
    <!-- Gallery 2 -->
    <a rel="gallery-2" href="big/image3.jpg" class="swipebox">
    	<img src="small/image3.jpg" alt="image">
    </a>
    <a rel="gallery-2" href="big/image4.jpg" class="swipebox">
    	<img src="small/image4.jpg" alt="image">
    </a>

### Video support

Simply paste a youtube or vimeo video URL in your href attribute. The script will automatically check if it's a youtube or vimeo URL and open the video in the swipebox.

My Video

    <a class="swipebox-video" rel="vimeo" href="http://vimeo.com/29193046">My Videos</a>

### Load slides dynamically

You can set your gallery dynamically by passing an array object to the swipebox.

View gallery

    $( '#gallery' ).click( function( e ) {
    	e.preventDefault();
    	$.swipebox( [
    		{ href:'big/image1.jpg', title:'My Caption' },
    		{ href:'big/image2.jpg', title:'My Second Caption' }
    	] );
    } );

### Check open state

    if ( $.swipebox.isOpen ) {
    	// do stuff
    }

### Options

    <script type="text/javascript">
    ;( function( $ ) {

    	$( '.swipebox' ).swipebox( {
    		useCSS : true, // false will force the use of jQuery for animations
    		useSVG : true, // false to force the use of png for buttons
    		initialIndexOnArray : 0, // which image index to init when a array is passed
    		hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
    		removeBarsOnMobile : true, // false will show top bar on mobile devices
    		hideBarsDelay : 3000, // delay before hiding bars on desktop
    		videoMaxWidth : 1140, // videos max width
    		beforeOpen: function() {}, // called before opening
    		afterOpen: null, // called after opening
    		afterClose: function() {}, // called after closing
    		loopAtEnd: false // true will return to the first image after the last image is reached
    	} );

    } )( jQuery );
    </script>

Download View Source