This tutorial is a simple one. It's simply about transforming the animation in the Elementor lightbox from 'slide' to 'fade'.
In my example page, click on an image, and navigate through the Elementor lightbox, to see the fade transition in action.
Extra: This tutorial will also make it possible to use HTML in the title and description of the slideshow captions. You will be able to bold text, make it italic, change the color and styling of parts of it, using basic HTML.
Let's get started!
First, determine where you want the Elementor Fade Lightbox
This is a premium tutorial. Purchase access to unlock the full tutorial.
9 Responses
This snippet worked, but once it's installed, the title and description aren't showing up on any images except the first one. I need to have titles and descriptions accompanying these images. Can you give me a fix?
Also, I'm trying to figure out a way to use html in the WordPress image title and description areas, but they are not being recognized. Is there a way to do this?
I updated my code to work with captions, and even HTML in captions (which natively isn't possible).
Hi again, and thanks for your last reply.
I am having a new issue now when using this code. When I click on an image the first time, I get a spinning wheel. Then once I close the image I'm able to open it the second time without delay I click on it. It doesn't happen on every image, and it's happening on different images every time I load a page. This is an error I'm getting in the console:
"Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at (index):1013:11"
This is one of the pages with a gallery it's happening on - https://www.laceyterrell.com/velvet-jail-galleries/
Do you have a fix for this?
Thanks in advance for your help!
I updated the code to fix this issue... please swap your code with this updated version.
Cheers!
Thank you so much for doing that. I'm not getting the error message any more.
Just an FYI for you, it seems like the loading issue is only fixed when I use the "on specific pages" code and put it in an HTML element at the end of the page. It doesn't work when it's at the top of the page.
Also, it seems to only work when the thumbnails are set to "full size" so the images are pre-load on the page before the lightbox is opened.
I could be wrong about this, but it's the only way I was able to make it work.
I appreciate all of your replies and fixes!
Thanks for sharing!
It didn't work for me. only a black bordered box appeared on the side of my gallery. Could you help me solve it?
Hey Claudia! Yes I can help you with this. Could you share the URL with me where you are testing this?
Hi Maxime, I'd like to do the same with a testimonial carousel, without worrying about captions… Is there a simple way to modify your code to do this? Thanks!