yue1123 / img-previewer

A light wight javascript image viewing plugin with silky preview animation and dependence free

Hi there

I'm dh, a fullStack developer.

Contact me at GitHub | Email

Skills

Highlighting Projects

• Vue3 Baidu Map Gl Components Libary
• Ts Config Helper
• Img Previewer
• Vite Plugin Spa Loading
• Vite Plugin Env Parse
• Vite Plugin Base64 Import
• Vite Plugin Super Icon

Stats

img-previewer's Issues

Allowing the ImgPreviewer to allow Elements

Hey!

I have been using this awesome package to work with my project but I have hit a issue which I think would be a great addition to your package.

When passing in paramaters to the ImgPreviewer() it only allows for "selector" right now. I think being able to pass in HTMLElement would make things much easier when dealing with logic around initalising the lightboxes.

My use case:

const lightboxes = $(".lightbox");

if (lightboxes.length > 0) {
  lightboxes.each((index, lightbox) => {
    new ImgPreviewer(lightbox, {
      fillRatio: 0.7,
      imageZoom: {
        step: 1,
      },
      style: {
        modalOpacity: 0.8,
        headerOpacity: 1,
        zIndex: 1,
      },
      bubblingLevel: 1,
      onClose: () => {},

      triggerEvent: "click",
      onShow: () => null,
    });
  });
}

Let me know if this sounds like something you might be interested in!

the ease out animation does work as expected when the target image is not shown in the first viewport.

Demo Site: [DELETED]

There are five images on the demo site, the first two images work well, but the last three images aren't be animated as wished when closing the preview layer.
if you want the source code for debugging, I would be pleased to send it to you by email.
last but not least, thanks for your great works on this awesome project.

Is it possible to show full preview image from the data attribute?

Is it possible to show full preview image from the data attribute?

<img src="image.jpg" data-preview="image-large.jpg" alt="my-image">

Preview `display none` image

I want to have some hidden images and then show previewer programatically. so can we have a function like previewer.show(1)
to show index one image?
now it has some issues like getting width: 0 and height: 0

support select which event(click or dbclick) tirgger preview

sometimes, wouldn't want click to tirgger preview, like use listen click event to do other things

Solution for separate thumbnail/preview resolution

Hey! Came across this project today when on the lookout for an image lightbox that suits my needs.

The issue I ended up having is that it relies on images being loaded on the page at preview size i.e. at a larger size than they need to be in the context of the page layout, which is an obvious downnside re: performance.

Perhaps this can be solved with an enhancement that leverages a larger image path in a data attribute, or similar (this seems to be the way other libs handle it, at least).

Safari Dispalys only part of the image

When the thumbnail is clicked, Safari only shows a small portion of the image

It loads all images!!

I tried it and works good enough.
issue. There are 12 images in gallery, but it somehow counts images as 16 and loads even the logo in litebox. How can I avoid loading other images from the same page ?