fancyapps / ui

A library of JavaScript UI components, includes the best lightbox - Fancybox5
https://fancyapps.com/
Other
785 stars 98 forks source link

Carousel: Thumbs: data-thumb-style option #503

Closed AndersMad closed 11 months ago

AndersMad commented 1 year ago

Is your feature request related to a problem? Please describe.

Just like setting data-thumb-src it would be nice if there was a data-thumb-style on the image

Describe the solution you'd like

In my case its about per image object-position for "focal point" settings but could also be a per image background color for "placeholder loading".

Describe alternatives you've considered

Doing it me' self if I had the source 😅 I know I could create my own carousel and sync it.

Additional context

No response

fancyapps commented 1 year ago

Actually, you can manipulate with the thumbnail slide element, like this - https://jsfiddle.net/6samf3uh/

Fancybox.bind('[data-fancybox="gallery"]', {
  on: {
    "reveal": (fancybox, slide) => {
      slide.contentEl.style.filter = 'brightness(1.75)';
    },
  },
  Thumbs : {
    on : {
      "createSlide": (thumbs, slide, thumbSlideEl) => {
        thumbSlideEl.style.filter = 'brightness(1.75)';
      }
    }
  }
});