Press "Enter" to skip to content

Touch-Friendly Image Lightbox for Mobile/Desktop with jQuery | simplelightbox

Simple Lightbox plugin is a responsive, touch-friendly, easy-to-touch image display for mobile and desktop with jQuery.

Features:

  • swipe gestures for next/previous image
  • easy to install, easy to use
  • Only some css is included. You can change the style as you want!
  • preloading next and previous image
  • Android, iOs and Windows phone support
  • CSS3 Transitions with fallback for older browsers
  • Works in every modern Browser, even in IE 9+
  • Can use jQuery 1.x,2.x and 3.x, but don’t need
  • Keyboard support
  • Pinch to zoom
  • Double-tap to zoom

How to make use of it:

1. Load the simple-lightbox.min.css within the header and within the footer part of the online 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>

2. Insert all of your pictures right into a gallery container.

<div class="gallery"> 

  <a href="1.jpg" class="big" rel="rel1">
    // Add Image Here
  </a>

  <a href="2.jpg" class="big" rel="rel1">
    // Add Image Here
  </a>

  <a href="3.jpg" class="big" rel="rel2">
    // Add Image Here
  </a>

  <a href="4.jpg" class="big" rel="rel2">
    // Add Image Here
  </a>
  
</div>

3. Call the plugin with default choices to allow the lightbox.

// As A Vanilla JavaScript Plugin
var gallery = new SimpleLightbox('.gallery a', { 
    /* options */ 
});

// As A jQuery Plugin -->
var gallery = $('.gallery a').simpleLightbox({
    /* options */
});

4. Full customization choices with default values.

// default source attribute
sourceAttr: 'href',

// shows fullscreen overlay
overlay: true,

// shows loading spinner
spinner: true,

// shows navigation arrows
nav: true,

// text for navigation arrows
navText: ['&larr;','&rarr;'],

// shows image captions
captions: true,
captionDelay: 0,
captionSelector: 'img',
captionType: 'attr',
captionPosition: 'bottom',
captionClass: '',

// captions attribute (title or data-title)
captionsData: 'title',

// shows close button
close: true,

// text for close button
closeText: 'X',

// swipe up or down to close gallery
swipeClose: true,

// show counter
showCounter: true,

// file extensions
fileExt: 'png|jpg|jpeg|gif',

// weather to slide in new photos or not, disable to fade
animationSlide: true,

// animation speed in ms
animationSpeed: 250,

// image preloading
preloading: true,

// keyboard navigation
enableKeyboard: true,

// endless looping
loop:  true,

// group images by rel attribute of link with same selector
rel: false,

// closes the lightbox when clicking outside
docClose:  true,

// how much pixel you have to swipe
swipeTolerance: 50,

// lightbox wrapper Class
className: 'simple-lightbox',

// width / height ratios
widthRatio: 0.8,
heightRatio: 0.9,

// scales the image up to the defined ratio size
scaleImageToRatio: false,

// disable right click
disableRightClick: false,

// disable page scroll
disable: true,

// show an alert if image was not found
alertError:  true,

// alert message
alertErrorMessage: 'Image not found, next image will be loaded',

// additional HTML showing inside every image
additionalHtml: false,

// enable history back closes lightbox instead of reloading the page
history: true,

// time to wait between slides
throttleInterval: 0,

// Pinch to feature for touch devices
doubleTapZoom: 2,
maxZoom: 10,

// adds class to html element if lightbox is open
htmlClass: 'has-lightbox',

// RTL mode
rtl: false,

// elements with this class are fixed and get the right padding when lightbox opens
fixedClass: 'sl-fixed'

5. API strategies.

// Opens the lightbox
gallery.open(); 

// Closes the lightbox
gallery.close(); 

// Goto next image
gallery.next(); 

// Goto previous image
gallery.prev(); 

// re-init the lightbox
gallery.refresh(); 

// Destroys the lightbox
gallery.destroy(); 

6. Events.

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

Responsive Touch-enabled Image Lightbox, simple lightbox Plugin/Github


See Demo And Download

Official Website(andreknieriem): Click Here

This superior jQuery/javascript plugin is developed by andreknieriem. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.