How to properly apply dynamic inline styles to fancybox gallery images

[dustinKicksite]

I have a question, what is the best way to pass user created css variables to images in the fancybox carousel gallery?

I have a Wordpress site that gives users/builders the ability to apply brightness, saturation, and contrast filters to images in a gallery block. When they choose to do this, it creates a CSS variable within the gallery element that is referenced in the gallery's SCSS file.

Right now, in my fancybox.js file, I'm:

• Using the builtin "on" event
• On "Carousel.ready Carousel.change" I am searching for the for the element that contains the CSS variable and saving it to a JS variable
• Then apply those styles as an inline CSS variable to "fancybox-image" element in the carousel

So far this is working, but not quite how I'd like it to. Currently, when you click the image and the carousel loads, the image appears briefly with no inline filter before adding it to the element.

I'm sure this is just an order of operations issue, but after going through the documentation I didn't find anything that seemed to help with this problem. If this is not the way to go about it, I'd be happy to try something different.

Live Example Site

HTML:

<div 
  class="gallery-item"
  <?php echo $image_overlay ? "style='--gallery-image-overlay: {$image_overlay};'" : NULL; ?>
>
   <img 
     class="masonry-gallery-image"
     src="<?php echo $gallery_image['sizes']['large']; ?>"  
     alt="<?php echo $image_alt; ?>"
     <?php echo $advanced_image_controls ? "style='--advanced-image-controls: {$image_styles};'" : NULL; ?>
   >
</div>

Fancybox.js code:

Fancybox.bind(`[data-fancybox='masonry-gallery-${i + 1}']`, {
    // Your custom options
    on: {
      "Carousel.ready Carousel.change": (fancybox, slide) => {
        const originalImageStyles = gallery.querySelector(
          `.masonry-gallery-image`
        );

        const computedStyle = getComputedStyle(
          originalImageStyles
        ).getPropertyValue(`--advanced-image-controls`);

        const images = document.querySelectorAll(`.fancybox-image`);
        images.forEach((image) => {
          image.style = `--advanced-image-controls: ${computedStyle}`;
        });
      },
    },
  });

[fancyapps]

Hi,

You use reveal event, like this:

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

https://jsfiddle.net/h7qs3o9w/

[dustinKicksite]

Apologies for that, I hadn't pushed up the changes to the staging environment. They should be live now Live Example

[fancyapps]

Now, none of your sites are working :)

[dustinKicksite]

Apologies again! Our staging platform is mediocre at best. I've remade the gallery-test page and published it. If you retry the link it should be live now.

[fancyapps]

OK, thanks for the demo, now I understand the confusion. You see, to get better zoom in/out animation performance, the trick is to animate the thumbnail image and then switch to the actual image. That's why you see the delay. The simplest solution would be to apply a CSS filter to the wrapper element - https://jsfiddle.net/3otdsxwc/

slide.contentEl.style.filter = 'brightness(1.75)';

[dustinKicksite]

That worked perfectly! Thank you so much for the assistance.

[dustinKicksite]

Apologies if this should be asked in a new discussion, but is there a list of the optional parameters that are available to the event listeners? I'm trying to do something similar to the above, but for the thumbnail images. I looked through the documentation, but didn't see a list of parameters.

[fancyapps]

Actually, it is posible, 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)';
      }
    }
  }
});

[dustinKicksite]

Thanks for the info! I appreciated for all of you help.