@pluginjs/lightbox
Advanced tools
A flexible modern lightbox js plugin.
npm i @pluginjs/lightbox
yarn add @pluginjs/lightbox
Webpack && Rollup:
ECMAScript Modules
import lightbox from "@pluginjs/lightbox"
CommonJS
require("@pluginjs/lightbox")
CDN: Development:
<script src="/path/to/lightbox.js"></script>
<link rel="stylesheet" href="/path/to/lightbox.css">
Production:
<script src="/path/to/lightbox.min.js"></script>
<link rel="stylesheet" href="/path/to/lightbox.min.css">
HTML:
<body>
<div class="element"></div>
</body>
JS:
Pj.Lightbox('.element', options);
// or jquery way
$('.element').plugin('Lightbox', options);
Options are called on lightbox instances through the lightbox options itself. You can also save the instances to variable for further use.
Example
$('.element').plugin('Lightbox', {
theme: "foo"
})
or use dataset
<div class="element" data-theme="foo"></div>
<script>
$('.element').plugin('Lightbox')
</script>
| Name | Description | Default |
|---|---|---|
"theme" | Add plugin theme option | null |
"delegate" | Picture element selector | null |
"clickBgClose" | Click the background to turn off the lightbox, true or false | true |
"clickImageClose" | Click the picture to turn off the lightbox, true or false | true |
"thumbs" | Whether to display thumbnails, true or false | true |
"title" | Whether to display title, true or false | true |
"templates" | Element templates | {} |
Events are called on lightbox instances through the lightbox events itself. You can also save the instances to variable for further use.
| Name | Description |
|---|---|
"update" | Gets fired when plugin is destroy |
"ready" | Gets fired when plugin is ready |
"enable" | Gets fired when plugin is enabled |
"disable" | Gets fired when plugin is disabled |
"destroy" | Gets fired when plugin is destroy |
example:
$lightbox.plugin('Lightbox', {
onUpdate: function() {
// code...
}
})
$lightbox.on(
'lightbox:update',
function(){
// code...
}
)
Methods are called on lightbox instances through the lightbox method itself. You can also save the instances to variable for further use.
| Name | Description |
|---|---|
"value" | |
"enable" | Enabled plugin if plugin is disabled |
"disable" | Disable plugin |
"destroy" | Destroy plugin |
example:
$lightbox.plugin('Lightbox', value)
$lightbox.plugin('Lightbox', value, "foo")
$lightbox.plugin('Lightbox', value, "foo", "bar")
| Name | Description | Default |
|---|---|---|
"NAMESPACE" | Declare plugin namespace | pj-lightbox |
"THEME" | Declare plugin theme | {namespace}--{theme} |
"CONTAINER" | Declare plugin range | {namespace}-container |
"ACTIVE" | Announce plugin is actived | {namespace}-active |
"DISABLED" | Announce plugin is disabled | {namespace}-disabled |
"OVERLAY" | Announce element is overlay | {namespace}-overlay |
"WRAP" | Announce element is wrap | {namespace}-wrap |
"FOOTER" | Announce element is footer | {namespace}-footer |
"CAPTION" | Announce element is caption | {namespace}-caption |
"TITLE" | Announce element is title | {namespace}-title |
"THUMBNAILS" | Announce element is thumbnails | {namespace}-thumbnails |
"INNER" | Announce element is thumbnails inner | {namespace}-thumbnails-inner |
"THUMB" | Announce element is thumb | {namespace}-thumb |
"THUMBBG" | Announce element is thumb background | {namespace}-thumb-bg |
"SLIDE" | Announce element is slide | {namespace}-slide |
"ITEM" | Announce element is item | {namespace}-item |
"ITEMINNER" | Announce element is item inner | {namespace}-item-inner |
"LOADER" | Announce element is loader | {namespace}-loader |
"CONTENT" | Announce element is content | {namespace}-content |
"IMAGE" | Announce element is image | {namespace}-image |
"VIDEO" | Announce element is video | {namespace}-video |
"PLAY" | Announce element is play | {namespace}-play |
"LOADING" | Announce element is loading | {namespace}-loading |
"MAP" | Announce element is map | {namespace}-map |
"IFRAME" | Announce element is iframe | {namespace}-iframe |
"INLINE" | Announce element is inline | {namespace}-inline |
"AJAX" | Announce element is ajax | {namespace}-ajax |
"ARROW" | Announce element is arrow | {namespace}-arrow |
"READY" | Announce plugin Loading completed | {namespace}-ready |
"OVERFLOWHIDE" | Announce the style of the element overflow-hide | {namespace}-overflow-hide |
"SLIDEBOTTOM" | Announce the style of the element slide-bottom | {namespace}-slide-bottom |
"SLIDELEFT" | Announce the style of the element slide-left | {namespace}-slide-left |
"SLIDERIGHT" | Announce the style of the element slide-right | {namespace}-slide-right |
"SLIDETOP" | Announce the style of the element slide-top | {namespace}-slide-top |
"THUMBACTIVE" | Announce the style of the element thumb-active | {namespace}-thumb-active |
"THUMBSTRANSITION" | Announce the style of the element thumbs-transition | {namespace}-thumbs-transition |
"SLIDETRANSITION" | Announce the style of the element slide-transition | {namespace}-slide-transition |
"VERTICALCENTER" | Announce the style of the element vertical-center | {namespace}-vertical-center |
"LOADED" | Announce image loading completed | {namespace}-loaded |
"HIDE" | Announce the style of the element hide | {namespace}-hide |
"TOPBAR" | Announce element is topBar | {namespace}-topBar |
"COUNTER" | Announce element is counter | {namespace}-counter |
"SHARE" | Announce element is share | {namespace}-share |
"DOWNLOAD" | Announce element is download | {namespace}-download |
"FULLSCREEN" | Announce element is fullScreen | {namespace}-fullScreen |
"CLOSE" | Announce element is close | {namespace}-close |
"WHITE" | Announce plugin theme | {namespace}-theme-white |
"BLACK" | Announce plugin theme | {namespace}-theme-black |
| Name | EN | ZH |
|---|---|---|
"hello" | Hello world | 世界你好 |
"greeting" | Hello {name}! | {name} 你好! |
"plurals" | {count} product,{count} products,no product | {count} 个产品 |
Tested on all major browsers.
 |  |  |  |  |  |
|---|---|---|---|---|---|
| Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | >=10 ✓ | Latest ✓ |
As a jQuery plugin, you also need to see the jQuery Browser Support.
See Contribution.md.
To see the list of recent changes, see Releases section.
Version: 0.2.1
Copyright (C) 2017 Creation Studio Limited.
Licensed under the GPL-v3 license.
FAQs
A flexible modern lightbox js plugin.
The npm package @pluginjs/lightbox receives a total of 2 weekly downloads. As such, @pluginjs/lightbox popularity was classified as not popular.
We found that @pluginjs/lightbox demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.