Responsive Touch-enabled jQuery Image Lightbox Plugin

Responsive Touch-enabled jQuery Image Lightbox Plugin
File Size: 6.9 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery plugin helps you create image lightbox and gallery lightbox on your desktop and mobile websites.

Features:

  • Responsive and touch friendly.
  • Image preloading and loading spinner.
  • CSS3 powered animations.
  • Keyboard / Touch swipe navigation.
  • Custom image aspect ratio.

How to use it:

1. Load the simplelightbox.min.css in the header and the simple-lightbox.min.js in the footer, but after jQuery library.

<link href="simplelightbox.min.css" rel="stylesheet">
...
<script src="jquery.min.js"></script>
<script src="simple-lightbox.min.js"></script>

2. Insert all your images into a gallery container. The plugin will automatically generate captions from alt attribute of img tag.

<div class="gallery"> 

  <a href="1.jpg" class="big">
    <img src="thumb1.jpg" alt="" title="Image 1">
  </a>

  <a href="2.jpg" class="big">
    <img src="thumb2.jpg" alt="" title="Image 2">
  </a>

  <a href="3.jpg" class="big">
    <img src="thumb3.jpg" alt="" title="Image 3">
  </a>

  <a href="4.jpg" class="big">
    <img src="thumb4.jpg" alt="" title="Image 4">
  </a>
  
</div>

3. Call the plugin with default options to enable the lightbox.

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

4. Full plugin options with default values.

$.simpleLightbox({

// 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',

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

// shows close button
close:      true,

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

// show counter
showCounter:  true,

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

animationSlide:   true,

// animation speed in ms
animationSpeed: 250,

// image preloading
preloading:   true,

// keyboard navigation
enableKeyboard: true,

// endless looping
loop:     true,

// 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,

// disable right click
disableRightClick:  false,

// disable page scroll
disableScroll:    true,

alertError:     true,
alertErrorMessage:  'Image not found, next image will be loaded',
additionalHtml:   false

});

5. API methods.

// 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.

  • open.simplelightbox: fires before the lightbox opens
  • opened.simplelightbox: fires after the lightbox was opened
  • close.simplelightbox: fires before the lightbox closes
  • closed.simplelightbox: fires after the lightbox was closed
  • change.simplelightbox: fires before image changes
  • changed.simplelightbox : fires after image was changed
  • next.simplelightbox: fires before next image arrives
  • nextDone.simplelightbox: fires after next image was arrived
  • prev.simplelightbox: fires before previous image arrives
  • prevDone.simplelightbox: fires after previous image was arrived
  • nextImageLoaded.simplelightbox : fires after next image was loaded (if preload activated)
  • prevImageLoaded.simplelightbox : fires after previous image was loaded (if preload activated)
  • error.simplelightbox : fires on image load error
$('.gallery a').on('open.simplelightbox', function () {
  // do something…
});

Change logs:

2017-07-19

  • Thanks to walterebert, added support for images with parameters and file extension check

2017-05-15

  • New option for src of image. e.g data attribute

2017-04-04

2017-03-22

  • Prevent default keyup action only if lightbox is opened

2017-01-11

  • Add !default flag
  • Improve caption opacity

2016-11-24

  • bugfixes

2016-11-13

  • bugfixes

2016-10-31

  • Aligned navigation and close buttons, fixed image error bug

2016-10-25

  • Added support for jQuery 3.x

2016-10-13

  • Add option to hash to the open lightbox for mobile sites
  • some bugfixing and code styling

2016-07-27

  • added rel option for grouping images

2016-07-03

  • Allows to re-init simpleightbox

2016-06-06

  • Swipe top/bottom to close gallery

2016-05-03

  • Fixed docClose issue on iPad
  • Added option for additional html inside images

2016-04-12

  • bugfixes.

2016-02-29

  • bugfixes.

2016-02-08

  • New API Events (changed open to show) and little fix in function open() brought by Geoffrey Crofte and some other small bugfixes

2016-01-23

  • more bugfix

2016-01-08

  • bugfix

2016-01-04

  • Add support for fading between photos
  • Bugfix for single image navigation

2015-12-15

  • Option for caption position. 
  • Disable prev or next arrow if loop is false and position is first or last.

2015-12-03

  • Bugfix for multiple lightboxes on one page

2015-11-08

  • Added options for disabling rightclick and scrolling, changed default prev- and next-button text

2015-11-03

  • Option for fileExt can now be false

2015-10-27

  • Bugfix lightbox opening does not work on mobile devices

2015-10-26

  • Bugfix no drag&drop in FF, changed default close text, only output data if lightbox is opened

2015-10-15

  • Bugfix z-index for spinner to low, added sass files

2015-10-13

  • Increase Z-Index
  • Fixed Drop Event does not fire when mouse leaves window

2015-10-03

  • The whole caption Selector is rewritten. You can now select an element and get its text, use data or attribute

2015-09-14

  • Caption Attribute can now be any attribute. Bugfixes

2015-09-05

  • disable keyboard control if lightbox is closed

2015-08-17

  • Added current index indicator/counter

2015-07-06

  • Added option for captions attribute (title or data-title)

2015-05-31

  • bugfix for looping

This awesome jQuery plugin is developed by andreknieriem. For more Advanced Usages, please check the demo page or visit the official website.