Featherlight- Changeable And Semi-Lightbox Plugin In jQuery

File Size:935.2 KB
Views Total:251
Last Update:January 1, 2018
Publish Date:December 28, 2017
Official Website:Go to website
License:MIT

A extremely simple yet fully configurable jQuery lightbox plugin as it creates the custom modal boxes with full screen overlays and along with the close buttons is known as the Featherlight.It is lightweight and flexible as well. It has a wide range of configuration options and that can be easily adaptable as per the needs. It is easy to understand and one can easily rewrite if you need it to be.

Characterstics:

  • It is quite easy and light in weight.
  • With the complete help of the little code, lightboxes can be built with the content loaded with the ajax.
  • Overstyling can be easily done with the help of featherlight.
  • It supports the image, iframe and the html support program.
  • It has a responsive design format.

You may like this Gallery :  Featherlight.Gallery.js

How to use :

1. Include required featherlight stylesheet :

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

2. Create a trigger with data-featherlight attribute pointing :

<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 :

<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:    '✕', 

/* 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']

Done 🙂