Responsive Touch-enabled jQuery Image Lightbox Plugin

Responsive Touch-enabled jQuery Image Lightbox Plugin
File Size: 6.92 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',
  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
  disableScroll:    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

});

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…
});

Changelog:

2018-10-17

  • Bugfixed and added possibility to close lightbox on load

2018-10-05

  • Fix overlay z-index

2018-06-20

  • Set Imagecaption same with as image

2018-06-20

  • Make overlay opacity configurable

2018-03-09

  • Bugfix

2018-01-29

  • Fixed bugs and removed bind/unbind

2017-11-24

  • New option captionClass
  • Bug with refresh() and jquery 3.2.1

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.