Responsive Touch Image Simple Lightbox jQuery Plugin

Responsive Touch Image Simple Lightbox jQuery Plugin

Responsive touch image simple lightbox jQuery plugin is responsive, supple, flexible and mobile-friendly JavaScript plugin. This is touch-friendly image lightbox for desktop and mobile. It is supposed to helps you to create image lightbox and gallery lightbox on desktop and mobile sites.

Responsive touch image simple lightbox jQuery plugin is easy to install and easy to use and it works in every modern Browser even in IE 9+. You can use jQuery 1.x,2.x and 3.x but don’t need. Some CSS is counted in but style can be changed as per your desire.

This simple lightbox jQuery plugin helps you to swipe or slide gestures for next or previous image. Moreover, it comes with lots of useful options and features to make it more useful and user-friendly.

  • Image preloading and loading spinner.
  • Minimalistic and Responsive 
  • Touch friendly
  • CSS3 powered animations
  • Double-tap to zoom
  • Keyboard / Touch swipe navigation
  • Custom image aspect ratio
  • Touch or double tap
  • Preloading next and previous image
  • Click or pinch to zoom
  • Works as either JavaScript or jQuery plugin
  • Android, iOS and Windows phone support
  • CSS3 Transitions with fallback for older browsers
  • Keyboard support

Install:

To install SimpleLightbox, do the following:

// YARN
yarn add simplelightbox

//Bower
bower install simplelightbox

//NPM
npm install simplelightbox

Load the simple-lightbox.min.css in the header and the simple-lightbox.min.js in the footer section of the web page.

<link href="dist/simple-lightbox.min.css" rel="stylesheet" />
<!-- As A Vanilla JavaScript Plugin -->
<script src="simple-lightbox.min.js"></script>
<!-- As A jQuery Plugin -->
<script src="jquery.min.js"></script>
<script src="simple-lightbox.jquery.min.js"></script>

Insert all your images into a gallery container. The plugin will automatically generate captions from alt attribute of img tag. To group images, you just need to add the rel attribute to the links as follows:

<div class="gallery">
    <a href="images/image1.jpg"><img src="images/thumbs/thumb1.jpg" alt="" title=""/></a>
    <a href="images/image2.jpg"><img src="images/thumbs/thumb2.jpg" alt="" title="Beautiful Image"/></a>
</div>

Call the plugin with default options to enable the lightbox.

$('.gallery a').on('open.simplelightbox', function () {
  // do something…
});

$('.gallery a').on('error.simplelightbox', function (e) {
  console.log(e); // some usefull information
});

JavaScript Options

PropertyDefaultTypeDescription
sourceAttrhrefstringthe attribute used for large images
overlaytrueboolshow an overlay or not
spinnertrueboolshow spinner or not
navtrueboolshow arrow-navigation or not
navText[‘←’,’→’]arraytext or html for the navigation arrows
captionstrueboolshow captions if availabled or not
captionSelector‘img’stringset the element where the caption is. Set it to “self” for the A-Tag itself
captionType‘attr’stringhow to get the caption. You can choose between attr, data or text
captionsDatatitlestringget the caption from given attribute
captionPosition‘bottom’stringthe position of the caption. Options are top, bottom or outside (note that outside can be outside the visible viewport!)
captionDelay0intadds a delay before the caption shows (in ms)
captionClassstringadds an additional class to the sl-caption
closetrueboolshow the close button or not
closeText‘×’stringtext or html for the close button
swipeClosetrueboolswipe up or down to close gallery
showCountertrueboolshow current image index or not
fileExt‘png|jpg|jpeg|gif’regexp or falselist of fileextensions the plugin works with or false for disable the check
animationSpeed250inthow long takes the slide animation
animationSlidetrueboolweather to slide in new photos or not, disable to fade
preloadingtrueboolallows preloading next und previous images
enableKeyboardtrueboolallow keyboard arrow navigation and close with ESC key
looptrueboolenables looping through images
relfalsemixedgroup images by rel attribute of link with same selector.
docClosetrueboolcloses the lightbox when clicking outside
swipeTolerance50inthow much pixel you have to swipe, until next or previous image
className‘simple-lightbox’stringadds a class to the wrapper of the lightbox
widthRatio0.8floatRatio of image width to screen width
heightRatio0.9floatRatio of image height to screen height
scaleImageToRatiofalseboolscales the image up to the defined ratio size
disableRightClickfalsebooldisable rightclick on image or not
disableScrolltrueboolstop scrolling page if lightbox is opened
alertErrortrueboolshow an alert, if image was not found. If false error will be ignored
alertErrorMessage‘Image not found, next image will be loaded’stringthe message displayed if image was not found
additionalHtmlfalsestringAdditional HTML showing inside every image. Usefull for watermark etc. If false nothing is added
historytrueboolenable history back closes lightbox instead of reloading the page
throttleInterval0inttime to wait between slides
doubleTapZoom2intzoom level if double tapping on image
maxZoom10intmaximum zoom level on pinching
htmlClasshas-lightboxstringadds class to html element if lightbox is open. If empty or false no class is set
rtlfalseboolchange direction to rigth-to-left
Responsive Touch Image Simple Lightbox Plugin

Events

NameDescription
show.simplelightboxthis event fires before the lightbox opens
shown.simplelightboxthis event fires after the lightbox was opened
close.simplelightboxthis event fires before the lightbox closes
closed.simplelightboxthis event fires after the lightbox was closed
change.simplelightboxthis event fires before image changes
changed.simplelightboxthis event fires after image was changed
next.simplelightboxthis event fires before next image arrives
nextDone.simplelightboxthis event fires after next image was arrived
prev.simplelightboxthis event fires before previous image arrives
prevDone.simplelightboxthis event fires after previous image was arrived
nextImageLoaded.simplelightboxthis event fires after next image was loaded (if preload activated)
prevImageLoaded.simplelightboxthis event fires after previous image was loaded (if preload activated)
error.simplelightboxthis event fires on image load error

Examples

$('.gallery a').on('show.simplelightbox', function () {
	// do something…
});

$('.gallery a').on('error.simplelightbox', function (e) {
	console.log(e); // some usefull information
});

Public Methods

NameDescription
openOpens the lightbox with an given Element
closeCloses current openend Lightbox
nextGo to next image
prevGo to previous image
destroyDestroys the instance of the lightbox
refreshDestroys and reinitilized the lightbox, needed for eg. Ajax Calls, or after dom manipulations

Example

var gallery = $('.gallery a').simpleLightbox();

gallery.next(); // Next Image

Multiple Lightboxes on one page

Multiple lightboxes can be used on one page and you can give them different choosers. Let me give an example so point can be cleared;

var lightbox1 = $('.lighbox-1 a').simpleLightbox();
var lightbox2 = $('.lighbox-2 a').simpleLightbox();

Customization

You can customize Simple lightbox by altering the style in simplelightbox.css.

If you are using SASS, you can customize Simple lightbox with the following variables

$sl-font-family: Arial, Baskerville, monospace;
$sl-overlay-background: #fff;
$sl-navigation-color: #000;
$sl-caption-color: #fff;
$sl-caption-background: #000;
$sl-overlay-opacity: 0.7;

$sl-counter-fontsize: 1rem;
$sl-caption-fontsize: 1rem;
$sl-close-fontsize: 3rem;

$sl-breakpoint-medium: 35.5em; // 568px, when 1rem == 16px
$sl-breakpoint-large:  50em;   // 800px, when 1rem == 16px

$sl-arrow-fontsize-small:  2rem;
$sl-arrow-fontsize-medium: 3rem;
$sl-arrow-fontsize-large:  3rem;
$sl-img-border-small:  0 none;
$sl-img-border-medium: 0 none;
$sl-img-border-large:  0 none;
$sl-iframe-border-small:  0 none;
$sl-iframe-border-medium: 0 none;
$sl-iframe-border-large:  0 none;

$add-vendor-prefixes: true !default;

File Information

File Size5.53 MB
Last Update12 Days Ago
Date Published9 Months Ago
LicenseMIT

Your email address will not be published. Required fields are marked *

More Stories
GDPR Cookie Consent JavaScript Plugin
GDPR Cookie Consent JavaScript Plugin