jQuery Touch Enabled Responsive Image Lightbox – Swipebox

Swipebox is a cross platform, cross browsers jQuery touch enabled responsive image lightbox that supports swipe to slide images, video and inline contents.

Plugin Overview

Plugin: Swipebox
Author: Brutal Design
Licence: MIT Licence
Published: March 2, 2019
Repository: Fork on GitHub
Dependencies: jQuery 2.1.0 or Latest version
File Type: zip archive (Image, HTML, CSS & JavaScript)
Package Size: 65 KB

Main Features

  1. Touch enabled, supports swipe (left, right, top, down) to slide the images / video /inline content.
  2. Keyboard Navigation for desktop
  3. CSS transitions with jQuery fallback
  4. Retina support for UI icons
  5. Easy CSS customization
  6. Video, Images and Inline content

How to Use Touch Enabled Responsive Image Lightbox:

1. Load the jQuery and Swipebox JavaScript and CSS files into HTML document.

<!--jQuery-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<!--Swipebox JS-->
<script src="src/js/jquery.swipebox.js"></script>

<!--Swipebox CSS-->
<link rel="stylesheet" href="src/css/swipebox.css">

2. Create HTML structure for images like below:

	
	<section id="exemple" class="container">
		<div class="wrap small-width">
			<div id="try"></div>
			<ul id="box-container">
				<li class="box">
					<a href="https://source.unsplash.com/600x300/?fitness" class="swipebox" title="Fitness">
						<img src="https://source.unsplash.com/600x300/?fitness" alt="image">
					</a>
				</li>
				<li class="box">
					<a href="https://source.unsplash.com/600x300/?yoga" class="swipebox" title="Yoga">
						<img src="https://source.unsplash.com/600x300/?yoga" alt="image">
					</a>
				</li>
				<li class="box">
					<a href="https://source.unsplash.com/600x300/?bikini" class="swipebox" title="Bikni">
						<img src="https://source.unsplash.com/600x300/?bikini" alt="www.codehim.com">
					</a>
				</li>
				<li class="box">
					<a href="https://source.unsplash.com/600x300/?girl" class="swipebox" title="Girl">
						<img src="https://source.unsplash.com/600x300/?girl" alt="www.codehim.com">
					</a>
				</li>
			</ul>
		</div>
	</section>

3. Call the plugin in jQuery document ready function to active the lightbox.

$(document).ready(function(){
$('.swipebox').swipebox();
});

4. To create a dynamic image gallery.

/* Dynamic Gallery */
$( '#gallery' ).click( function( e ) {
	e.preventDefault();
	$.swipebox( [
		{ href : 'your-image-addrss-here', title : 'My Caption' },
		{ href : 'your-image-addrss-here', title : 'My Second Caption' }
		   ] );