Customizable & Ultra-Light jQuery Lightbox Plugin - Featherlight

File Size: 940 KB
Views Total: 22580
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Customizable & Ultra-Light jQuery Lightbox Plugin - Featherlight

Featherlight is an extremely simple yet fully configurable jQuery lightbox plugin for creating custom modal boxes with full-screen overlays and close button.

While Featherlight is very lightweight, it's also very flexible. Thanks to a range of configuration options, you can adapt it to your needs. You can specify the selectors that trigger the lightbox, the triggering events, and you can even override the whole close and open functions. And since it's so lightweight – Featherlight is easy to understand and to completely rewrite if you need to.

Features:

  • Super simple and lightweight.
  • With little code, you can build lightboxes that use custom content loaded with ajax.
  • It's easy to override the styling of Featherlight.
  • iframe, image, html support.
  • Responsive design.

Basic Usage:

1. Include required featherlight stylesheet on your web page.

<link type="text/css" rel="stylesheet" href="src/featherlight.min.css" title="Featherlight Styles" />

2. Create a trigger with data-featherlight attribute pointing to the target element.

<a href="#" data-featherlight="#demo">Trigger</a>

3. Create the Html for the lightbox.

<div class="lightbox" id="demo">
<h2>Lightbox Heading</h2>
<p> CONTENT</p>
</div>

4. Load the latest version of jQuery library and jQuery Featherlight plugin at the bottom. That's it.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="src/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

5. All the default options.

namespace:    'featherlight',        

/* Attribute of the triggered element that contains the selector to the lightbox content */
targetAttr:   'data-featherlight', 

/* Class that will be added to change look of the lightbox */
variant:      null, 

/* Reset all css */
resetCss:     false,  

/* Custom DOM for the background, wrapper and the closebutton */
background:   null,    

/* Event that triggers the lightbox */
openTrigger:  'click',      

/* Event that triggers the closing of the lightbox */
closeTrigger: 'click',   

/* Selector to filter events. Think $(...).on('click', filter, eventHandler) */
filter:       null,     

 /* Where to append featherlights */
root:         'body',

/* Duration of opening animation */
openSpeed:    250,   

/* Duration of closing animation */
closeSpeed:   250,  

/* Close lightbox on click ('background', 'anywhere' or false) */
closeOnClick: 'background',  

/* Close lightbox when pressing esc */
closeOnEsc:   true,      

/* Close icon */
closeIcon:    '&#10005;', 

/* Content to show while initial content is loading */
loading:      '',             

/* If set, the content persist and will be shown again when opened again. 'shared' is a special value when binding multiple elements for them to share the same content */
persist:      false,        

/* Selector for alternate close buttons (e.g. "a.close") */
otherClose:   null,      

/* Called before open. can return false to prevent opening of lightbox. 
   Gets event as parameter, this contains all data */
beforeOpen:   $.noop,      

/* Called when content is loaded. 
   Gets event as parameter, this contains all data */
beforeContent: $.noop,  

/* Called before close. can return false to prevent opening of lightbox. 
   Gets event as parameter, this contains all data */
beforeClose:  $.noop,      

/* Called after open. Gets event as parameter, this contains all data */
afterOpen:    $.noop,

/* Called after content is ready and has been set. 
   Gets event as parameter, this contains all data */
afterContent: $.noop,  

/* Called after close. Gets event as parameter, this contains all data */
afterClose:   $.noop, 

/* Called on key down for the frontmost featherlight */
onKeyUp:    $.noop,	

/* Called after new content and when a window is resized */
onResize:     $.noop,									

/* Specify type of lightbox. If unset, it will check for the targetAttrs value. */
type:         null,      

/* List of content filters to use to determine the content */
contentFilters: ['jquery', 'image', 'html', 'ajax', 'iframe', 'text']

Changelog:

v1.7.14 (2019-08-22)

  • UMD compatible

v1.7.13 (2018-04-02)

v1.7.0 (2016-12-23)

  • Can now specify standard iFrame attributes and CSS
  • Hopefully Fix iOS scroll issue

v1.6.1 (2016-11-18)

  • Preserve & restore existing tabindex values

v1.6.0 (2016-11-17)

  • Changed close icon to a . Be sure to use current CSS files too. 
  • Improved focus handling

v1.5.1 (2016-11-02)

  • update

v1.5.0 (2016-06-28)

  • CSS now sets box-sizing to border-box

v1.4.1 (2016-05-05)

  • update.

v1.4.0 (2016-03-21)

  • New method resize that can be overriden if need be.

v1.3.5 (2015-11-14)

  • Bug fixes

v1.3.4 (2015-09-10)

  • Tweak auto binding to work with persist and remove limitation on filter.

v1.3.3 (2015-08-18)

  • Gallery: renamed 'images' to 'slides'

v1.3.2 (2015-06-10)

  • Gallery: renamed 'images' to 'slides'

v1.3.1 (2015-06-05)

  • Bug fix for 1.3.0

v1.3.0 (2015-06-03)

  • New persist option to persist content

v1.2.3 (2015-03-22)

  • Bump z-index to insure dialogs appear above everything else.
  • Open & Close return promises that are resolved when their action successfully finishes.

v1.2.2 (2015-03-12)

  • Fixed Hammer support

v1.2.1 (2015-03-09)

  • Fixed namespace option.

v1.2.0 (2015-02-21)

  • New content-filter "iframe" to generate an iframe with the given URL. Options iframeWidth, iframeMinWidth, etc. or their corresponding data attributes are used as CSS when present.
  • New setting: loading (default is '') is shown initially while content loads. The lightbox also has a class '.featherlight-loading' while content is loading.

v1.1.0 (2015-02-18)

  • New callback: onResize called for new content and when the window is resized.
  • onResize is used to automatically resize images if needed.
  • current() now returns null if no lightbox is currently opened
  • now avoids memory leaks
  • onKeyDown() renamed onKeyUp()

v1.0.4 (2015-01-28)

  • update

v1.0.3 (2014-12-10)

  • Fix bug in IE8. 

v1.0.2 (2014-11-27)

  • Gallery: Bug with beforeOpen callback.

v1.0.1 (2014-11-18)

  • Re-release, removing afterSlide & beforeSlide and some debugging code

v1.0.0 (2014-11-17)

  • New option filter to attach lazily like $(sel).on('click', filter, ...). Attaching is done for the whole set, not on each individual element. Attributes of the whole set and the filtered element are combined.
  • New option otherClose to support extra closing buttons.
  • New option root to support appending featherlight elsewhere than on the body.
  • New content filter 'text' for plain text messages.
  • New callback onKeyDown, beforeContent, afterContent
  • Gallery can display mixed content, not just images.
  • Gallery has new callbacks beforeSlide and afterSlide.
  • Gallery defaults are accessible with $.featherlightGallery.defaults
  • Callbacks like afterOpen can be set using data-featherlight-after-open
  • Gallery inherits Featherlight's prototype and class methods.
  • Gallery can be called entirely from javascript.
  • Gallery can be navigated using left and right arrow keys.
  • Gallery uses its autoBind setting to automatically bind galleries. Its recommended to use it with the filter setting.
  • $.featherlight now always trigger a new lightbox. Use $.fn.featherlight for attaching events to elements.
  • The order of the arguments of $.fn.featherlight has been reversed, for consistency and ease of use, but remain optional.
  • The configuration options open and close have been removed.
  • The configuration options autostart, context and selector have been merged to the global $.featherlight.autoBind. It's also lazily attached, so items added via ajax, for example, will be automatically attached too.
  • The $elm attribute has been removed.
  • The config attribute has been removed and merged with the this object.
  • The methods global attribute has been removed. Methods have changed quite a bit. Access the prototype instead if needed.
  • Content returned from filters isn't cloned anymore.
  • Gallery configuration has changed and is no longer nested under gallery.
  • Small bugs fixed
  • Content filter 'jquery' now clones content and bound handlers.

v0.4.4 (2014-05-31)

  • Call afterClose callback after the end of the fadeout
  • Avoid using global events since they are undocumented and apparently deprecated.
  • Tweak alignment

v0.4.1 (2014-04-18)

  • New option closeOnClick to support closing by clicking anywhere – Any element inside the lightbox with the class "featherlight-close" will now trigger the closing event
  • Support for nested lightboxes

v0.4.0 (2014-04-08)

  • New option closeOnClick to support closing by clicking anywhere – Any element inside the lightbox with the class "featherlight-close" will now trigger the closing event
  • Support for nested lightboxes
  • Gallery uses swipes on touch devices (if a supported library present)
  • Gallery support and uses events to navigate through the images
  • New functions: $.featherlight.close() and current()
  • All configuration options have their equivalent html attribute.
  • Improved and extensible content filters.
  • Improvements for mobile devices
  • Many small bugs fixed
  • Tests added
  • $.fn.featherlight is now chainable

v0.3.1 (2014-03-02)

  • Added closeIcon option
  • Added Gallery Configuration Options: gallery: { previous: '◀', /* Code that is used as previous icon / next: '▶', / Code that is used as next icon / fadeIn: 100, / fadeIn speed when image is loaded / fadeOut: 300 / fadeOut speed before image is loaded */ }

v0.2.2 (2014-02-10)

  • Added closeIcon option
  • Added Gallery Configuration Options: gallery: { previous: '◀', /* Code that is used as previous icon / next: '▶', / Code that is used as next icon / fadeIn: 100, / fadeIn speed when image is loaded / fadeOut: 300 / fadeOut speed before image is loaded */ }

v0.2.0 (2014-02-10)

  • Added Gallery Extension

v0.1.13 (2014-02-09)

  • Fixed issue #7 where links inside lightboxes don't work

v0.1.12 (2014-02-04)

  • Added configuration option 'openSpeed' and 'closeSpeed' to set animation duration
  • Featherlight checks for jQuery and throws an error if not loaded

v0.1.11 (2013-12-10)

  • Added type configuration object with two keys. type.image: false, type.ajax: false to manually set type of lightbox
  • Fixed behavior with missing data in targetAttr and handling of non found content

v0.1.8 (2013-11-12)

  • Improved code readability
  • Fixed typos

v0.1.7 (2013-11-07)

  • Fixed IE Issue.

v0.1.6 (2013-11-06)

  • Added support for ajax using data-featherlight="ajax" and a href attribute
  • Added support for ajax using data-featherlight="url.html .jQuery-selector"
  • Modified the way how images are handeled to match ajax method using data-featherlight="image"
  • Added $.featherlight.methods so all methods are accessible
  • Improved JS code
  • Moved defaults to $.featherlight.defaults

v0.1.5 (2013-11-05)

  • Added support for images
  • Added option to reset css – { resetCss: true }
  • Improved CSS to use flexible height and vertical alignment
  • Improved JS code

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