@buddenbrock/ad-lightbox.js

This JavaScript includes a solution for adding a lightbox with a linked images which opens automatically after page loaded.

How to install

Add package

Using npm

npm -i @buddenbrock/ad-lightbox.js --save

Using yarn

yarn add @buddenbrock/ad-lightbox.js

Add the styles bundle to your head block

Using NPM or Yarn

<link href="./src/ad-lightbox.min.css" rel="stylesheet" />

Using CDN

<link href="https://unpkg.com/@buddenbrock/ad-lightbox.js@0.2.0/src/ad-lightbox.min.css" rel="stylesheet" />

Add the script bundle to your footer script block

Using NPM or Yarn

<script src="./src/ad-lightbox.min.js"></script>

Using NPM or Yarn

<script src="https://unpkg.com/@buddenbrock/ad-lightbox.js@0.2.0/src/ad-lightbox.min.js"></script>

How to use

Initialise class

let adLightbox = new AdLightbox();

Add your options

Defining your options by adding settings array to class init. These options are supported. Not redefined options will be set by default values.

Settings

Property	Description	Options	Default
image	ad image path	string
link	link for linked ad image	string
linkTarget	defines the target window base of a reference.	_blank, _self, _parent, _top	_blank
closeButtonContent	lightbox close button text	string	Close
visibilityClass	class set if lightbox is shown	string	visible
wrapperClass	class set for lightbox-wrapper	string	ad-lightbox
overlayClass	class set for background overlay	string	ad-lightbox__overlay
closeButtonClass	class set for lightbox close button	string	ad-lightbox__button
contentClass	class set for lightbox content wrapper	string	ad-lightbox__content
imageClass	class set for lightbox ad image	string	ad-lightbox__image
dontOpenAgain	defines the timing behavior when the lightbox wound reopened (if it's true the lightbox would reopen after given expired days)	boolean	true
localStorageKey	storage key in which settings will be saved	string	ad-lightbox
localStorageExpiry	days after which the lightbox reopend again	int	1

Example

let adLightbox = new AdLightbox({
    image: 'https://via.placeholder.com/1400x500',
    link: 'https://www.google.com',
    linkTarget: '_blank',
    closeButtonContent: 'Close',
});

Future features

• option to trigger lightbox after a special time

Donation

This is free, open-source software. If you'd like to support the development of future projects, or say thanks for this one, you can donate.

License

GPL-3.0 © @buddenbrock/ad-lightbox.js