deoostfreese / Parvus
Licence: mit
An accessible, open-source image lightbox with no dependencies.
Stars: ✭ 124
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Parvus
Parvus
An accessible, open-source image lightbox with no dependencies.
Stars: ✭ 248 (+100%)
Mutual labels: vanilla, accessibility, a11y, lightbox
Tobi
An accessible, open-source lightbox with no dependencies.
Stars: ✭ 195 (+57.26%)
Mutual labels: a11y, lightbox, vanilla
tobii
An accessible, open-source lightbox with no dependencies
Stars: ✭ 132 (+6.45%)
Mutual labels: vanilla, a11y, lightbox
Top People To Follow In Web Accessibility
A list of the top people to follow in web accessibility and web standards.
Stars: ✭ 117 (-5.65%)
Mutual labels: accessibility, a11y
Accesslint Ci
Install the GitHub Integration https://github.com/apps/accesslint
Stars: ✭ 82 (-33.87%)
Mutual labels: accessibility, a11y
Ember A11y Testing
A suite of accessibility tests that can be run within the Ember testing framework
Stars: ✭ 125 (+0.81%)
Mutual labels: accessibility, a11y
Vue A11y Dialog
Vue.js component for a11y-dialog
Stars: ✭ 65 (-47.58%)
Mutual labels: accessibility, a11y
Accessible Html Content Patterns
♿️ The full HTML5 Doctor Element Index as well as common markup patterns for quick reference.
Stars: ✭ 93 (-25%)
Mutual labels: accessibility, a11y
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-31.45%)
Mutual labels: accessibility, a11y
A11y Dialog
A very lightweight and flexible accessible modal dialog script.
Stars: ✭ 1,768 (+1325.81%)
Mutual labels: accessibility, a11y
Svelte Navigator
Simple, accessible routing for Svelte
Stars: ✭ 125 (+0.81%)
Mutual labels: accessibility, a11y
Accessibilitools
UI tools to help make your Android app accessible.
Stars: ✭ 81 (-34.68%)
Mutual labels: accessibility, a11y
Udoit
The Universal Design Online content Inspection Tool, or UDOIT (pronounced, “You Do It”) enables faculty to identify accessibility issues in Canvas by Instructure. It will scan a course, generate a report, and provide resources on how to address common accessibility issues.
Stars: ✭ 80 (-35.48%)
Mutual labels: accessibility, a11y
Ally.js
JavaScript library to help modern web applications with accessibility concerns
Stars: ✭ 1,447 (+1066.94%)
Mutual labels: accessibility, a11y
Pa11y Webservice
Pa11y Webservice provides scheduled accessibility reports for multiple URLs
Stars: ✭ 122 (-1.61%)
Mutual labels: accessibility, a11y
Acot
💎 Accessibility Testing Framework. More accessible web, all over the world.
Stars: ✭ 112 (-9.68%)
Mutual labels: accessibility, a11y
Lity
Lightweight, accessible and responsive lightbox.
Stars: ✭ 1,051 (+747.58%)
Mutual labels: accessibility, lightbox
Parvus
An accessible, open-source image lightbox with no dependencies.
Table of contents
Features
- Accessible
- API
- Events
Get Parvus
Download
CSS: dist/css/parvus.min.css minified, or dist/css/parvus.css un-minified
JavaScript: dist/js/parvus.min.js minified, or dist/js/parvus.js un-minified
Package managers
Parvus is also available on npm.
npm install parvus --save
Usage
You can install Parvus by linking the .css and .js files to your HTML file. The HTML code may look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>
<!-- CSS -->
<link href="path/to/parvus.min.css" rel="stylesheet">
</head>
<body>
<!-- HTML content -->
<!-- JS -->
<script src="path/to/parvus.min.js"></script>
</body>
</html>
The standard way of using Parvus is a linked thumbnail image with the class name lightbox to a larger image:
<a href="path/to/image.jpg" class="lightbox">
<img src="path/to/thumbnail.jpg" alt="">
</a>
Initialize the script by running:
const prvs = new Parvus()
Options
You can pass an object with custom options as an argument.
const prvs = new Parvus({
scrollClose: false
})
The following options are available:
| Property | Type | Default | Description |
|---|---|---|---|
| selector | string | ".lightbox" | All elements with this class triggers Parvus |
| lightboxLabel | string | "..." | ARIA label for screen readers |
| lightboxLoadingIndicatorLabel | string | "..." | ARIA label for screen readers |
| lightboxIndicatorIcon | string | "..." | SVG icon for the lightbox indicator |
| closeButtonIcon | string | "..." | SVG icon for the close button |
| closeButtonLabel | string | "..." | ARIA label for screen readers |
| docClose | bool | true | Click outside to close Parvus |
| scrollClose | bool | false | Scroll to close Parvus |
| swipeClose | bool | true | Swipe up to close Parvus |
| threshold | number | 100 | Touch dragging threshold (in px) |
| transitionDuration | number | 300 | Specifies how many milliseconds (ms) the transition effects takes to complete |
| transitionTimingFunction | string | "..." | Specifies the speed curve of the transition effects |
API
| Function | Description |
|---|---|
open(element) |
Open element (DOM element) |
close() |
Close Parvus |
add(element) |
Add element (DOM element) |
remove(element) |
Remove element (DOM element) |
isOpen() |
Check if Parvus is open |
destroy() |
Destroy Parvus |
Events
Bind events with the .on() and .off() methods.
const prvs = new Parvus()
const listener = function listener () {
console.log('eventName happened')
}
// bind event listener
prvs.on(eventName, listener)
// unbind event listener
prvs.off(eventName, listener)
| eventName | Description |
|---|---|
open |
Triggered after Parvus has been opened |
close |
Triggered after Parvus has been closed |
destroy |
Triggered after Parvus has been destroyed |
Browser support
Parvus supports the following browser (all the latest versions):
- Chrome
- Edge
- Firefox
- Safari
Use the :focus-visible polyfill to support Safari and other Browsers.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].