An accessible, open-source image lightbox with no dependencies

An accessible, open-source image lightbox with no dependencies

Parvus An accessible, open-source image lightbox with no dependencies.

Parvus

An accessible, open-source image lightbox with no dependencies.

Play on CodePen

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

Images: dist/images/zoom-in.svg and dist/images/zoom-out.svg

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
swipeClose bool true Swipe up to close Parvus
scrollClose bool true Scroll 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

Download Details:

Author: deoostfreese

Demo: https://codepen.io/deoostfreese/pen/GRqdEPY

Source Code: https://github.com/deoostfreese/Parvus

javascript css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Advanced CSS & Javascript Effects | Change Image Color on Click using CSS and Vanilla Javascript

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode...

How to Create JavaScript carousel with HTML, CSS and JavaScript

Learn how to create JavaScript carousel with HTML, CSS and JavaScript. Learn how to create a JavaScript slider step by step. Now many people will just download a library to create a JavaScript carousel or JavaScript slider.

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown. W will build a Responsive Website with HTML, CSS, and JavaScript

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles