Table of Contents
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.
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
5 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!