Get new jQuery plugins just once a week

×

FeatherLight-js

FavoriteLoadingAdd to favorites

May 12, 2014

FeatherLight-js | A very lightweight jQuery lightbox plugin.

Featherlight is a very lightweight jQuery lightbox plugin. It’s simple yet flexible and easy to use. Featherlight has minimal css and uses no inline styles, everything is name-spaced, it’s completely customizable via config object and offers image, ajax and iframe support out of the box. Featherlights small footprint weights about 4kB – in total.

It has the following features :-

Some of the default options are :-
defaults: {
namespace: 'featherlight', /* Name of the events and css class prefix */
targetAttr: 'data-featherlight', /* Attribute of the triggered element that contains the selector to the lightbox content */
variant: null, /* Class that will be added to change look of the lightbox */
resetCss: false, /* Reset all css */
background: null, /* Custom DOM for the background, wrapper and the closebutton */
openTrigger: 'click', /* Event that triggers the lightbox */
closeTrigger: 'click', /* Event that triggers the closing of the lightbox */
filter: null, /* Selector to filter events. Think $(...).on('click', filter, eventHandler) */
root: 'body', /* Where to append featherlights */
openSpeed: 250, /* Duration of opening animation */
closeSpeed: 250, /* Duration of closing animation */
closeOnClick: 'background', /* Close lightbox on click ('background', 'anywhere', or false) */
closeOnEsc: true, /* Close lightbox when pressing esc */
closeIcon: '✕', /* Close icon */
otherClose: null, /* Selector for alternate close buttons (e.g. "a.close") */
beforeOpen: $.noop, /* Called before open. can return false to prevent opening of lightbox. Gets event as parameter, this contains all data */
beforeClose: $.noop, /* Called before close. can return false to prevent opening of lightbox. Gets event as parameter, this contains all data */
afterOpen: $.noop, /* Called after open. Gets event as parameter, this contains all data */
afterClose: $.noop, /* Called after close. Gets event as parameter, this contains all data */
type: null, /* Specify content type. If unset, it will check for the targetAttrs value. */
contentFilters: ['jquery', 'image', 'html', 'ajax', 'text'] /* List of content filters to use to determine the content */
jquery/image/html/ajax/text: undefined /* Specify content type and data */
}

Created by noelboss

Download

Example

FeatherLight-js jQuery plugin

lightbox

FeatherLight-js

Related posts:

Visual LightBox
Remodal
fullsizable
FeatherLight-js jQuery plugin

http://jquer.in/wp-content/uploads/2014/04/FeatherLight-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever