Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
basiclightbox
Advanced tools
The lightest lightbox ever made.
Name | Description | Link |
---|---|---|
Default | Includes most features. | Try it on CodePen |
DOM elements/nodes | Use DOM elements/nodes in basicLightbox. | Try it on CodePen |
Create element | Use .createElement() with basicLightbox. | Try it on CodePen |
Events | Multiple ways to handle events. | Try it on CodePen |
basicLightbox depends on the following browser features and APIs:
Some of these APIs are capable of being polyfilled in older browsers. Check the linked resources above to determine if you must polyfill to achieve your desired level of browser support.
We recommend installing basicLightbox using npm or yarn.
npm install basiclightbox
yarn add basiclightbox
Include the CSS file in the head
tag and the JS file at the end of your body
tag…
<link rel="stylesheet" href="dist/basicLightbox.min.css">
<script src="dist/basicLightbox.min.js"></script>
…or skip the JS file and use basicLightbox as a module:
const basicLightbox = require('basiclightbox')
import * as basicLightbox from 'basiclightbox'
Creates a new basicLightbox instance.
Be sure to assign your instance to a variable. Using your instance, you can…
Examples:
const instance = basicLightbox.create(`
<h1>Dynamic Content</h1>
<p>You can set the content of the lightbox with JS.</p>
`)
const instance = basicLightbox.create(`
<h1>Not closable</h1>
<p>It's not possible to close this lightbox with a click.</p>
`, {
closable: false
})
const instance = basicLightbox.create(
document.querySelector('#template')
)
Parameters:
content
{Node|String}
Content of the lightbox.opts
{?Object}
An object of options.Returns:
{Object}
The created instance.Returns true
when a lightbox is visible. Also returns true
when a lightbox is currently in the process of showing/hiding and not fully visible/hidden, yet.
Example:
const visible = basicLightbox.visible()
Returns:
{Boolean}
Visibility of any lightbox.Each basicLightbox instance has a handful of handy functions. Below are all of them along with a short description.
Shows a lightbox instance.
Examples:
instance.show()
instance.show(() => console.log('lightbox now visible'))
Parameters:
cb(instance)
{?Function}
A function that gets executed as soon as the lightbox starts to fade in.Closes a lightbox instance.
Examples:
instance.close()
instance.close(() => console.log('lightbox not visible anymore'))
Parameters:
cb(instance)
{?Function}
A function that gets executed as soon as the lightbox has been faded out.Returns true
when the lightbox instance is visible. Also returns true
when the lightbox is currently in the process of showing/hiding and not fully visible/hidden, yet.
Example:
const visible = instance.visible()
Returns:
{Boolean}
Visibility of lightbox.Returns the DOM element/node associated with the instance.
Example:
const elem = instance.element()
Returns:
{Node}
DOM element/node associated with the instance.The option object can include the following properties:
{
/*
* Prevents the lightbox from closing when clicking its background.
*/
closable: true,
/*
* One or more space separated classes to be added to the basicLightbox element.
*/
className: '',
/*
* Function that gets executed before the lightbox will be shown.
* Returning false will prevent the lightbox from showing.
*/
onShow: (instance) => {},
/*
* Function that gets executed before the lightbox closes.
* Returning false will prevent the lightbox from closing.
*/
onClose: (instance) => {}
}
Import src/styles/main.scss
directly to customize the look of basicLightbox:
$basicLightbox__background: rgba(0, 0, 0, .8); // Background color
$basicLightbox__zIndex: 1000; // Stack order
$basicLightbox__duration: .4s; // Transition duration
$basicLightbox__timing: ease; // Transition timing
@import 'src/styles/main';
[5.0.4] - 2021-01-17
FAQs
The lightest lightbox ever made
The npm package basiclightbox receives a total of 3,840 weekly downloads. As such, basiclightbox popularity was classified as popular.
We found that basiclightbox demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.