jQuery Touch Enabled Responsive Image Lightbox – Swipebox

Swipebox is a fully customisable jQuery based responsive, cross platform, cross browsers touch enabled lightbox plugin that supports swipe to slide through images, video, and inline contents.

Plugin Preview

How to start using jQuery?

More jQuery Top, Best and New Plugins

Plugin Overview

Plugin: Swipebox
Author: Brutal Design
Licence: MIT Licence
Published: 2019-03-02 05:39:55
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 it:

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' }
		   ] );

Be the first to comment

Leave a Reply

Your email address will not be published.


*