Simple Lightbox

Touch-friendly image lightbox for mobile and desktop with jQuery

See demo Download WordPress Plugin

Released under the MIT License, source on Github (changelog)  


After testing and using several lightbox plugins (photoswipe, colorbox, etc…) I came to the end, that no lightbox was easy enough for me or that they are non mobile.

So I made this lightweight (< 6kb minified) jquery plugin which works with jquery 1.x or 2.x.


Features

  • responsive
  • touchfriendly
    swipe gestures for next/previous image
  • easy to install, easy to use
  • minimalistic
    Only some css is included. You can change the style like you want!
  • lots of options
  • preloading next and previous image
  • Android, iOs and Windows phone support
  • CSS3 Transitions with fallback for older browsers
  • Can use jQuery 1.x or 2.x
  • Keyboard support

Usage
Simple include simplelightbox.css and simple-lightbox.js to your page

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

Options

Property Default Type Description
overlay true bool show an overlay or not
spinner true bool show spinner or not
nav true bool show arrow-navigation or not
navText [‚‹‘,’›‘] array text or html for the navigation arrows
captions true bool show captions if availabled or not
captionDelay 0 int adds a delay before the caption shows (in ms)
captionSelector ‚img‘ string how to get the caption. You can choose between attr, data or text
captionType ‚attr‘ string show captions if availabled or not
captionsData title string get the caption from given attribute or data-title
captionPosition ‚bottom‘ string the position of the caption. Options are top, bottom or outside (note that outside can be outside the visible viewport!)
close true bool show the close button or not
closeText ‚ב string text or html for the close button
showCounter true bool show current image index or not
fileExt ‚png|jpg|jpeg|gif‘ regexp or false list of fileextensions the plugin works with or false for disable the check
animationSpeed 250 int how long takes the slide animation
animationSlide true bool weather to slide in new photos or not, disable to fade
preloading true bool allows preloading next und previous images
enableKeyboard true bool allow keyboard arrow navigation and close with ESC key
loop true bool enables looping through images
docClose true bool closes the lightbox when clicking outside
swipeTolerance 50 int how much pixel you have to swipe, until next or previous image
className: ’simple-lightbox‘ string adds a class to the wrapper of the lightbox
widthRatio: 0.8 float Ratio of image width to screen width
heightRatio: 0.9 float Ratio of image height to screen height
disableRightClick: false bool disable rightclick on image or not
disableScroll: true bool stop scrolling page if lightbox is opened
alertError: true bool show an alert, if image was not found
alertErrorMessage: ‚Image not found, next image will be loaded‘ string the message displayed if image was not found
additionalHtml: false string Additional HTML showing inside every image. Usefull for watermark etc. If false nothing is added

Events

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

Example

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

Public Methods

Name Description
open Opens the lightbox with an given jQuery Element
close Closes current opened Lightbox
next Go to next image
prev Go to previous image
destroy Destroys the instance of the lightbox

Example

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

gallery.next(); // Next Image