I played around with your lib, simple and small, i like it.

Now, when i use a thumbail e.g. <img src="/path/to/thumbnail_small.png" data-image="/path/to/full_res_image.png" > and use lightense, it will just zoom in the thumb (but with the size of the data-img).

Wheni use the "data-image" attribute 2 things happen:

• on click, it will be zoomed in by the size of the "data-image", but still the src is display (blurry big thumb)
• on ctrl click (new window), the full size image will be shown.

Is that considered a bug?

When adding Lightense to a Shopify store development environment with Webpack, the library fails to expose the Lightense module in a way that can be accessed in the HTML body.

Replicate Issue
Run git clone [email protected]:Shopify/slate.git

Create a new directory and run yarn create slate-theme my-new-theme. Finish setting the .env variables via these instructions.

Install Lightense in the my-new-theme directory via yarn add lightense-images

Import Lightense in src/scripts/layout/theme.js by adding import 'lightense-images'; to the file.

You can see the JS loading in Chrome dev tools in theme.js but Lightense cannot be accessed.

Notes
I think this has something to do with how Webpack is processing lightense.js. I replaced the contents of this file with lightense.es6, but this did not fix the issue, though the change was reflected in theme.js

It's also worth noting that lightense.js functions properly when the file contents are included in the HTML inline.

I'm trying to use Lightense on a page where some images are lazy loaded when a toggle is opened. I have a window.addEventListener('load' set up on the page generally, and am calling Lightense() on the images when they are loaded in.

The issue I'm seeing is that multiple instances of Lightense() break because the !d.querySelector('.lightense-backdrop') check causes config.container to be undefined:

Uncaught TypeError: Cannot read property 'removeEventListener' of undefined
    at unbindEvents (lightense.js:366)
    at removeViewer (lightense.js:299)
    at init (lightense.js:337)
    at HTMLImageElement.<anonymous> (lightense.js:193)

My solution is to set config.container to the already existing backdrop:

if (!d.querySelector('.lightense-backdrop')) {
  ...
} else {
  config.container = d.querySelector('.lightense-backdrop');
}

This fix works great, but I wanted to call it out and ask if there was a better solution to this general problem than what I'm doing. Thanks!

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency webpack to v5.76.0 [security]
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency babel-loader to v9
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-webpack-plugin to v4
• chore(deps): update dependency husky to v9
• chore(deps): update dependency release-it to v17
• chore(deps): update dependency webpack-cli to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Hello,

images are missing a margin/padding on the right side on small images.
How might this be fixed?

It is recommended that you automatically pick the color from the picture as the background color for the backdrop-filter after the onload event occurs

When images placed within columns like

-webkit-columns: 2;
-moz-columns: 2;
columns: 2;

zoomed images will be cropped/obscured in Chrome. Firefox is fine with it.

You can’t set the background in the config object because it gets overwritten in line 282

config.background = config.target.getAttribute('data-background') || false;

If you comment this line and change line 233 in createViewer() from this

if (config.background) config.container.style.backgroundColor = config.background;

to this

if (config.target.getAttribute('data-background')) {
  config.container.style.backgroundColor = config.target.getAttribute('data-background');
} else if (config.background) {
  config.container.style.backgroundColor = config.background;
}

you can set the background like this

// hand them over to Lightense
Lightense('img[data-zoom]', {
    background: 'rgba(0,0,0,0.5)'
});

and still overwrite the background locally using a data-backgroundattribute, if you wish to.

Anyway, great script, thanks :-)

Just adding one line to the demo doesnt make the lightbox appear, see my fork of your codepen: https://codepen.io/rejas/pen/WpjKqQ

Adding a rotation to the surrounding paragraph results in a "blank" overlay appearing but nothing more. I'm out of ideas myself how or if this can be fixed or resolved, maybe you have?

I'm getting unexpected behavior when using flexbox to align images.

As you can see, the images are moving around before the overlay is applied. But, even worse, the last image doesn't center itself as it should.

The markup:

<div class="gallery">
  <img src="images/18.jpg">
  <img src="images/19.jpg">
  <img src="images/20.jpg">
</div>

The styles:

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery img {
  flex-grow: 1;
  margin: 0 .25rem .5rem;
  width: 30%;
}

Is there something I can change in the config to have it perform as expected?

image-rendering could help

With a small change, you could let the user configure whether or not he wants to allow upscaling images or not

in line 108 add a default (false to keep normal behaviour as is):

  // default options
  var defaults = {
    time: 300,
    padding: 40,
    offset: 40,
    keyboard: true,
    cubicBezier: 'cubic-bezier(.2, 0, .1, 1)',
    background: 'rgba(255, 255, 255, .98)',
    zIndex: 2147483647,
    allowUpscaling: false
  };

And in line 260 change the if statement to this:

if (naturalWidth < viewportWidthOffset && naturalHeight < viewportHeightOffset && !config.allowUpscaling) {
//...

Thanks a lot :-)

@sparanoid

thanks for your great plugin <3

i have smooth-page-transition with Barba.js

i have to reinit the plugin..

reinit the plugin after page change but

that backdrop clone three time after page changed

and image transfrom does'nt work good

pls tell me how to destory plugin and remove backdrops

Regards

Hey! Thank you for the nice library.

I am currently running into an issue. The background behavior is different between Firefox and Chrome: basically when clicking on an image with Firefox the background remains transparent, while it becomes white with Chrome.

I think they should be consistent.

I have created a sample document that shows the behaviour:
!html example.zip

The problem: if one of lightense image parents has overflow:auto, the image is not positioned correctly, and is obscured.