deoostfrees / parvus Goto Github PK

Tested with Safari / Firefox / Brave + iPhone.
(use the demo to play along)

1. cycle through the images by either clicking/tapping the buttons or using the left/right arrows on the keyboard
2. reach the first or last image in the series
3. press the arrow keys once more or press the button again

Observed behaviour or actual result: the first/last image gives the impression of (briefly) sliding away to make place for the next one. Nothing happens however

Expected behaviour:
the button is disabled (and hidden or greyed out), pressing the arrow keys does nothing.

Note: the buttons have the aria-disabled attribute set (true), but the buttons are not actually disabled.

This worked as expected in Parvus 2.3.*

I was doing some testing with a placeholder service where the URL didn't end with a proper extension, and while these URLs work just fine in an image tag, Parvus threw this in the console.

parvus.min.js:11 
        
       Uncaught Error: https://placehold.co/600x400/png
    at D (parvus.min.js:11:3094)
    at parvus.min.js:11:2706
    at NodeList.forEach (<anonymous>)
    at Y (parvus.min.js:11:2693)
    at new t (parvus.min.js:11:16608)
    at HTMLDocument.init ((index):60:2)

Hi,

thanks for this awesome, accessible lightbox! :)

I ran into an issue importing the l10n files.
When I try to import them like this:

import de from 'parvus/src/l10n/de';

I get an error in my bundler (= vite):

Missing "./src/l10n/de" specifier in "parvus" package

Looks like there is an error in the package configuration.
I had the same issue with the styles, but I got it working once i moved the import into my scss-files and used an absolute path.

// won't work
@import 'parvus/src/scss/parvus';
// works
@import '/node_modules/parvus/src/scss/parvus';

Would be nice if you could manage to fix this.

Thanks! :)

Combine a group of images into a set with the data-group attribute.

I find swiping on slides to be a very weird experience when using a mouse or trackpad, and would like to disable it by checking window.matchMedia("(pointer: fine)") before initializing Parvus.

When I implement Parvus, I'm getting multiple instances of the same image with an error in the console:

See this screencast: https://cloudup.com/cXEouIO2f3S

parvus.js:440 Uncaught Error: Ups, I'm already closed.
    at close (parvus.js:440)
close @ parvus.js:440

I'm including the library like this after I install with yarn:

import Parvus from 'parvus';

export default {
  init() {
  const prvs = new Parvus();
  prvs();
  }
}

it will be great if it get images as an array and handle theme as gallery to see prev and next image

Only briefly looked at the demo, but one thing that strikes me...it would be nice to have an explicit close button (that can receive focus as well), as relying purely on the user's ability to either press Esc or clicking on the enlarged image may not work that well for touchscreen+AT users.

Improve the appearance/ positioning of the captions.

Add option (https://github.com/deoostfreese/Parvus#options) to make the hardcoded supported images file extensions
customizable:

https://github.com/deoostfreese/Parvus/blob/d3acb3b73059469ea4ab8291eb370fb2f88f89c4/src/js/parvus.js#L298

Current behaviour - based on the CodePen example:
Opening a gallery does not stop scrolling. The user can dismiss the image via touch (or dragging).

Desired behaviour:
a.) Scrolling would dismiss the image, similiar to https://github.com/francoischalifour/medium-zoom
b.) Scrolling would be locked if a Parvus lightbox is open

Discussed in #41

Only briefly tested the codepen demo, but it seems that even when the lightbox is open, I can swipe to/reach the underlying page. This is likely due to the fact that VO doesn't do anything special regardless of the role="dialog" (it doesn't automagically hide the underlying page from the accessibility tree). This may need an explicit addition of aria-hidden="true" (making sure the actual dialog container itself is not a child element of the hidden container).

Reduced test case

I created a reduced test case that showcases this behavior on CodePen:

• Debug mode (use this to test, if available)
• Full page view
• Code view

Steps to reproduce the issue

Different Browsers produce different results.

Chrome & Edge:

1. Open a new tab. Be sure your cache is disabled (Devtools > Network > Disable Cache).
   • Bug will not be visible on repeat visits / cached images.
2. Visit the debug mode or full page view from above.
3. Click an image to open the Lightbox.
4. Click the "X" to close the image / Lightbox.
5. Click the same image to open it again.

Safari:

1. Open a new tab. Be sure your cache is disabled (Devtools > Network > Disable Cache).
   • Bug will not be visible on repeat visits / cached images.
2. Visit the debug mode or full page view from above.
3. Click an image to open the Lightbox.

Results

Chrome & Edge:

The image is invisible when you open it the second time.

Safari:

The image is invisible in the Lightbox upon first click / fresh cache. The image does show if you click to open it again.

It appears the image is indeed in the DOM when it's "invisible"; however, inline styles are setting the width and height to 0, which causes the image to be invisible.

Expected results

The image(s) should display when you click to open it.

Environment

1. OSX Ventura 13.4.1
2. Chrome & Edge 114, Safari 16.5.1. Seems to work in Firefox!

Just based on the codepen, I'd suggest improving (explicitly setting) :focus styles.

In Firefox, the focus around the demo page's images is quite faint (the default dotted outline)

This may just be something to add/suggest in the demo itself. However, the close button may benefit from a defined style in parvus' own stylesheet.

Focus indication on the close button in Firefox is a very faint gray

In Chrome, the default for the images is fine, but the close button's style is again almost imperceptible

non-focused vs. focused

maybe something simple/consistent like swapping foreground/background?

.parvus__btn--close:focus {
    background-color: var(--button-color);
    color: var(--button-background-color);
    border-color: var(--button-background-color);
}

Hey, quick question... is there a way to grab the data-attribute value instead of the href?
I have this halftone effect script which replaces the original img with a set of dynamic elements, effectively rendering the Lightbox useless because there's no href anymore. Would be nice to be still able to use a lightbox on those.

P.S. I know I can wrap those elements with <a href= class=> but I was just wondering if there was more elegand way of doing this. thank you!

Nice lightbox, it works as expected but the backdrop in Firefox doesn't fill the background.
Using Firefox 116.0.1 under Ubuntu 22.04

In Chromium web browsers, no problem.

I would like to access the clicked element after the lightbox opens. Being able to pass data from the original HTML to the modal would be useful.

Maybe a property on the event like this:

const prvs = Parvus();
prvs.on("open", (event) => {
   alert("You opened the element with the caption: " + event.source.dataset.caption);
});

Is there anyway to display captions from a data or title attribute?