jQuery Touch Enabled Responsive Image Lightbox

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

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 the 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="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="codehim.com">
					</a>
				</li>
			</ul>
		</div>
	</section>

3. Call the plugin in the jQuery document ready function to activate 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' }
		   ] );

That’s all! hopefully, you have successfully created a responsive image lightbox using swipebox code snippet. If you have any questions or facing any issues, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.