Wow, thank you so much for this informative video! I had no idea this feature was available in Elementor and was planning on using javascript for my client's requirements. Your tutorial was clear and easy to follow, and I was able to implement the feature with ease. You truly are a lifesaver, thank you!😊
That's extremely helpful, man! Thanks so much for this guide, I was wondering how to open lightbox on any image, now I am able to to some interesting stuff that I only had in wireframe. Good day to you :)
This video is CRITICAL and I'm shocked that there's no widget where you can simply link a gallery to a button by default, without this 'programming'. For what it's worth, I was trying to do a carousal but also just a single image. To do it, you go through this same process but that first image you link to, that's the one you want to keep... but then keep the gallery, but then under "Content/Link/Cog Wheel..." just delete the custom attributes (which was the lightbox gallery). It still triggers the single image. Maybe there's a faster way to open an image as a Light Box but I haven't found it, other than piggybacking off of this great video.
Definitely a solution. Pay attention to the part at 04:36, do not miss to add a existing image file URL into the link field; if you need to load this first image dynamically as I did, you can set a image custom field using Advanced Custom Fields plugin.
@@PatrizioRomanoDellAnna Assolutamente, quando hai tempo! At the moment I have created a small function in javascript that intercepts the first image in the gallery and inserts the src in the a href and removes it from the gallery so as not to have duplicate images, but it is certainly not very optimised.
Hi there - not sure if this helps but I just faced a similar issue. It's not the greatest solution... but I solved it by creating an ACF text field where I can manually add the source URL of each "first" image for each post (WP page editor/backend). I then went back into Elementor and set the key to use that acf field within my template. Hope this helps! @@forlanistudio7493
Hi, loved this tutorial! I put my opening image to another image. It seems to work just fine in Elementor but once I try it on the browser it doesn't open the gallery and no lightbox even if I put the right ID etc. What am I doing wrong?
Wow! This is exactly what I was looking for! I'm just having an issue though, on the live site the lightbox is triggered but after a few seconds the image file in the link opens up. Am I missing something simple? 🤣
I had the same issue. I found that adding this: data-elementor-open-lightbox | yes solved the issue Use a , after the slideshow reference key | value. It will look like this: data-elementor-lightbox-slideshow | 32b09f3, data-elementor-open-lightbox | yes Hope that helps!
How can we make it for the media carousel for vidoe? I tried to do that. If I past video URL to button URL.It goes to video on youtube.It isnt open in a lightbox
Thank you for such a clear walk-through. Is there a way to get this to work for video? I was able to get a "broken image" icon to light box with the video, but that's it. lol And I can't seem to figure it out for the life of me. Any help would be greatly appreciated!
on my front end - the lightbox loads in the background and and then it switches to the link file url in a split second - help , is there any easier way to do this??
PLEASE HELP. The first image that i use (deleted from the carousel) doesn't show the image description. How can I display all the images description? thank you
@@OoohBoi hello sir your content is awesome and really helpful. I want to give a little advice to grow your Channel even faster and to reach more people make TH-cam shorts and also focus on them constantly for 1-2 months and you will really see results Remember everytime if any platform roll out a new feature just like shorts for TH-cam and reels for insta do Focus on that because they will give extra boost to those creators who are creating shorts content because they want to promote that feature more . Hope it will help ✌️
The "Hotspot" widget does not come with the capability of linking an image. I can't find an option that can allow me to make the entire image liked with a lightbox popup. Sad
Can you please make a video to trigger the lightbox for video?I want to create a media carousel and when I click on the button it will be appeared as you did in this video with an image carousel
Thanks for watching buddy! Speaking of the Barba, I'm still not sure whether it makes many points. Somehow I think that at least 95% of ppl might be disappointed upon the realization of what it takes to use that simple page transition.
@@OoohBoi That may be, but having this feature on board without explaining how it works somehow doesn't make sense, does it!!!? :) So show us how it works and after that everyone can decide for themselves if they want to use it or not! :)
Hi, could anyone just guide what is gone wrong, i created an wordpress website using elementor, all was well, only sometime before the website is not the scrolling the content, the scrolling reaching to the footer nothing in between is moving, this is happening on all the pages.. thanks..
I have 3 light boxes (one button for each lightbox) on my page. only one gives me arrows to navigate through the pics. the other 2 show a static image only (no arrows to cycle between the images). I figured the "link shows" but the attribution (slide ID) is not working for the other 2 buttons. I made sure I get all 3 IDs and enter under their respective buttons. Even if I use the same ID on all 3 buttons, only one button works. Anybody know why?
Hi, great video! Anyone knows how can be set the level of zoom of the lightbox? Cause now there is a fix level of zoom when u click the lens. I would like that visitar can set the %of zoom..
Hello and thank you! This is awesome! I just created a carousel as you showed and it's duplicating the image I used the url for the first image even though I deleted it from the carousel. Any ideas on a fix for this? I even rebuilt the carousel from scratch and tried it a second time and it's still duplicating the image I used as the url link. Thank you in advance!
I've learned the linked image gets duplicated in the carousel as many times as the image link is present on the page. 3 links, 3 duplicates will appear. Not sure how to fix yet.
@@davemagrum The only way I've found around the issue is to create a duplicate or triplicate image carousel gallery which doesn't really matter as it's all hidden anyway.
Has anyone been able to figure out why the carousel displays the first image twice? I saw one comment below mention this same issue but no solution. I made sure not to have the image in the actual image carousel that is being triggered but i am still seeing the first image twice in the lightbox.
Damn, that's brilliant!
I can imagine the eureka moment when you discovered this trick.
Well... I don't wanna brag but I worked on it for over two years 🤥
Wow, thank you so much for this informative video! I had no idea this feature was available in Elementor and was planning on using javascript for my client's requirements. Your tutorial was clear and easy to follow, and I was able to implement the feature with ease. You truly are a lifesaver, thank you!😊
Too easy.. The world needs more people like you :)
Wow You ARE a life saver! Good functionality and explained in a clear no nonsens fashion. If just all tutorials would be like this :D
Great! Thank you! But, Can we have a same tutorial on how to open a lightbox gallery for a custom post type in a dynamic way? e.g Pods, cpt ui etc?
do u find a solution for that i search it ? :)
This is how you excel! So deep into it!
Hello
Oooh Boi!
I have used this on my site. Everything turned out easily. Thank you! Continue to shoot interesting videos!
I have been searching for this onclick image carousel, so glad I found this!
That's extremely helpful, man! Thanks so much for this guide, I was wondering how to open lightbox on any image, now I am able to to some interesting stuff that I only had in wireframe.
Good day to you :)
Amazing! I searched for this for weeks. Thank you very much!
Simple and to the point. Thank you! Saved a lot of time linking videos on my client's page.
hello. any addtional steps needed to link videos, because i am trying and i can't seem to do it right
This video is CRITICAL and I'm shocked that there's no widget where you can simply link a gallery to a button by default, without this 'programming'.
For what it's worth, I was trying to do a carousal but also just a single image. To do it, you go through this same process but that first image you link to, that's the one you want to keep... but then keep the gallery, but then under "Content/Link/Cog Wheel..." just delete the custom attributes (which was the lightbox gallery). It still triggers the single image.
Maybe there's a faster way to open an image as a Light Box but I haven't found it, other than piggybacking off of this great video.
First comment. Thank u very much..! Lot of love from Sri lanka ❤️💪
Your videos are really helpful. That was brilliant. Thanks for the effort.
I tried to do this on a Slide button from Elementor, but it does not works
This worked for me with just the image widget. Very nice!
Your tutorial is very tricky and very helpful for us thank you so much
Oooh Boi! You've earned a new sub! That was amazing!
Exactly what I was looking for. Thank you!
This is awesome 😊 thanks for your tricks and tutorials
You are the greatest! Awesome tutorial, keep up the amazing work!
I didn't know this trick, thanks a lot for the video!
Definitely a solution.
Pay attention to the part at 04:36, do not miss to add a existing image file URL into the link field; if you need to load this first image dynamically as I did, you can set a image custom field using Advanced Custom Fields plugin.
Can you explain this point? How i can get only the url of first image of the gallery generated with ACF?
@@forlanistudio7493 at the moment I can't remember exactly the point, if you have time I'll be back to you asap.
@@PatrizioRomanoDellAnna Assolutamente, quando hai tempo! At the moment I have created a small function in javascript that intercepts the first image in the gallery and inserts the src in the a href and removes it from the gallery so as not to have duplicate images, but it is certainly not very optimised.
@@PatrizioRomanoDellAnna Did you happen to see this?
Hi there - not sure if this helps but I just faced a similar issue. It's not the greatest solution... but I solved it by creating an ACF text field where I can manually add the source URL of each "first" image for each post (WP page editor/backend). I then went back into Elementor and set the key to use that acf field within my template. Hope this helps! @@forlanistudio7493
Can we make this for Videos as well?
Hi, loved this tutorial! I put my opening image to another image. It seems to work just fine in Elementor but once I try it on the browser it doesn't open the gallery and no lightbox even if I put the right ID etc. What am I doing wrong?
The trick is really amazing, Good Luck bro.
It is so useful sir, Thank You😊
A great solution. Exactly what iI was looking for. Thank you very much
This helped me SO MUCH!!! Thank you!
Hello, Thankyou for this video. I have a tiny problem. When my lightbox opens i don't get arrows, do i need to do something to get arrows? Thanks!
PLEASE HELP!!! This is not working for me....Followed step by step but button is still only opening the first image link and not the carousel.
O meu também está com esse mesmo erro.
Add a space on both sides of the pipe. [data-elementor-lightbox-slideshow | d742e8d]
Wow! This is exactly what I was looking for! I'm just having an issue though, on the live site the lightbox is triggered but after a few seconds the image file in the link opens up. Am I missing something simple? 🤣
Turn off 'autoplay' option on the gallery
太棒了，這問題困擾了我好久，終於找到解決方案了，感謝!
Hmm...it seems in elemntor editor it working, but when i exit the editor and go to page, it doesn't work. It only opens the targeted photo. :(
I had the same issue. I found that adding this: data-elementor-open-lightbox | yes solved the issue
Use a , after the slideshow reference key | value. It will look like this: data-elementor-lightbox-slideshow | 32b09f3, data-elementor-open-lightbox | yes
Hope that helps!
How can we make it for the media carousel for vidoe? I tried to do that. If I past video URL to button URL.It goes to video on youtube.It isnt open in a lightbox
You're a life saver! Thank u so much for this
Can't wait to see the demo with anime js that this plugin has been added to new version, keepin update mybro
Hi, I'm using Image Box Widget, and it doesn't work. but if I use a simple button, it works. Do you have any explanation for this?
hi it is not working in case
Thank you so much from Belgium !!
Thank you for such a clear walk-through. Is there a way to get this to work for video? I was able to get a "broken image" icon to light box with the video, but that's it. lol And I can't seem to figure it out for the life of me. Any help would be greatly appreciated!
Wow, thank you so much for this informative video!
Nice and useful again !!! Keep posting more often Bro !!!
As much as my spare time allows me to... thanks!
@@OoohBoi we are waiting too long for new video Boi ;-)
Excellent! Just what I was looking for ;)
Incredibly inteligent! Thank you!
Very cool. Thank you.😃😃
This is very helpful, thank you
on my front end - the lightbox loads in the background and and then it switches to the link file url in a split second - help
, is there any easier way to do this??
Absolute legend! Thank you very much
Amazing and very help full for me, Thank You.
Absolutely great, i have learn new thing. thank you.
This is awesome! Thank you very much!
Can you do a video on using Barba in Steroids for page transitions?
PLEASE HELP. The first image that i use (deleted from the carousel) doesn't show the image description. How can I display all the images description? thank you
Amazing ❤️ Keep it up man 👍
The image I display first doesn't show the caption. I need to display the caption. how can I do that?
You are the best!! thank you so much for this
You're so welcome!
unfortunately this does not work for video lightbox.
That is nice, I will try this out in my next project ! Thanks !
Have fun!
@@OoohBoi hello sir your content is awesome and really helpful. I want to give a little advice to grow your Channel even faster and to reach more people make TH-cam shorts and also focus on them constantly for 1-2 months and you will really see results
Remember everytime if any platform roll out a new feature just like shorts for TH-cam and reels for insta do Focus on that because they will give extra boost to those creators who are creating shorts content because they want to promote that feature more . Hope it will help ✌️
image link added but same image is appeared twice in the lightbox, how to fix it.
Hi, thanks for the video. How did you get the main gallery, the one with the smaller image on the right?
great idea 😎
This is very useful, thanks!
You're welcome!
Great tutorial!
can you do the same but with a video popup?
Can't seem to do it now, anyone knows why? Tried on a fresh button , still not working.
Add a space on both sides of the pipe. [data-elementor-lightbox-slideshow | d742e8d]
Can you explain how we put the logo in the middle between the menu please
Nice !
Thanks for the tips ;)
Happy to help!
The "Hotspot" widget does not come with the capability of linking an image. I can't find an option that can allow me to make the entire image liked with a lightbox popup. Sad
Great Video. My filenames are showing under the pics. Is there a way to hide the filenames? Thanks
I found the solution: go to site setting and go to lightbox section and turn Title-->off
Thanks!
And if in this case it is a dynamic gallery
Can you please make a video to trigger the lightbox for video?I want to create a media carousel and when I click on the button it will be appeared as you did in this video with an image carousel
hello, Hope you are good. I just want to know is there any way to change the G L I D E R navigation icons? Thanks
if i have to show title below images when showing lightbox what to do???
sos un genio. algún día comeremos un asado. abrazo! me zafaste un laburo!
Hello
Oooh Boi! Is there also a premium version of that plugin availiable?
thanks bro. but why in media carousel there is no place for "link" ? so i cannt make lightbox in it
As the title said, I thought it was any kind of link, youtube video coming from custom field, does not work ... :(
Amazing as always and thank you thank you.. but I still miss Barba, when will she be here?
Thanks for watching buddy! Speaking of the Barba, I'm still not sure whether it makes many points. Somehow I think that at least 95% of ppl might be disappointed upon the realization of what it takes to use that simple page transition.
@@OoohBoi That may be, but having this feature on board without explaining how it works somehow doesn't make sense, does it!!!? :) So show us how it works and after that everyone can decide for themselves if they want to use it or not! :)
wee need your videos !!!!
Does this trick work with dynamic elements?
Great tutorials.
Thanks!
Its excellent. Pretty good
Thank you so much.
Hi, could anyone just guide what is gone wrong, i created an wordpress website using elementor, all was well, only sometime before the website is not the scrolling the content, the scrolling reaching to the footer nothing in between is moving, this is happening on all the pages.. thanks..
can u make a tutorial on how to build / code a custom elementor block
I have 3 light boxes (one button for each lightbox) on my page. only one gives me arrows to navigate through the pics. the other 2 show a static image only (no arrows to cycle between the images). I figured the "link shows" but the attribution (slide ID) is not working for the other 2 buttons. I made sure I get all 3 IDs and enter under their respective buttons. Even if I use the same ID on all 3 buttons, only one button works. Anybody know why?
Hi, great video! Anyone knows how can be set the level of zoom of the lightbox? Cause now there is a fix level of zoom when u click the lens. I would like that visitar can set the %of zoom..
That's exactly what I want to know as well!
Hello and thank you! This is awesome! I just created a carousel as you showed and it's duplicating the image I used the url for the first image even though I deleted it from the carousel. Any ideas on a fix for this? I even rebuilt the carousel from scratch and tried it a second time and it's still duplicating the image I used as the url link. Thank you in advance!
I've learned the linked image gets duplicated in the carousel as many times as the image link is present on the page. 3 links, 3 duplicates will appear. Not sure how to fix yet.
@@davemagrum The only way I've found around the issue is to create a duplicate or triplicate image carousel gallery which doesn't really matter as it's all hidden anyway.
@@anticmark3614 Thanks man, i was about to go crazy on that duplicate.
Has anyone found a fix to this issue?
Genius!
Has anyone been able to figure out why the carousel displays the first image twice? I saw one comment below mention this same issue but no solution. I made sure not to have the image in the actual image carousel that is being triggered but i am still seeing the first image twice in the lightbox.
Probably a little too late, but you have to remove the image from the gallery so it doesn't show as a duplicate.
my maann!!
It does not work for me... could it be due to the latest updates of elementor?
Add a space on both sides of the pipe. [data-elementor-lightbox-slideshow | d742e8d]
Thanks!
Welcome!
nice trick..but who can remember all this :-)
wish there was a simpler way!:
Is there any way that the image of each gallery can open a pop up with different information?
Hey I'm looking for the same thing. I have multiple buttons that trigger different carousels. have you found a solution?
@@Bonnie008 im not too sure if this is what you are asking but adding it in hopes it will be helpful. th-cam.com/video/m2QCUcEiuMQ/w-d-xo.html
Thanks
¡Gracias!
Happy New Year! When are new videos?