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!😊
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
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?
@@jaroslavkupca5082 : the same, just tried it now but it's not work .. still the button if you click it will shown the image of the link that you put in the button... Let me know if you solve it please. 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??
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!
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.
I am super glad with this solution and it still works today! However, I found a minor issue when you want to use the 'preload-feature' (site settings > page transitions > preload) the lightbox trick does not work anymore.. Do you have any idea why? Keep up the good work!
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
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
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!
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?
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
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
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..
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? 🤣
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.
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.
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..
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! :)
@@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 RUclips 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 RUclips 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 ✌️
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!😊
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!
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 ? :)
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 🤥
I tried to do this on a Slide button from Elementor, but it does not works
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
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?
¡Gracias!
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?
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]
@@rkitleli Not working for me too, however i did add a space on both sides of the pipe. Button does not react as shoul be on link.
@@jaroslavkupca5082 : the same, just tried it now but it's not work .. still the button if you click it will shown the image of the link that you put in the button... Let me know if you solve it please. thank you
Can we make this for Videos as well?
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
Too easy.. The world needs more people like you :)
Hello
Oooh Boi!
I have used this on my site. Everything turned out easily. Thank you! Continue to shoot interesting videos!
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??
This is exactly what I needed. Thanks a lot! That's awesome that it doesn't require JavaScript. I tried GPT, but this is on a whole different level
I have been searching for this onclick image carousel, so glad I found this!
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!
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 :)
Can you explain how we put the logo in the middle between the menu please
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.
Amazing! I searched for this for weeks. Thank you very much!
I am super glad with this solution and it still works today! However, I found a minor issue when you want to use the 'preload-feature' (site settings > page transitions > preload) the lightbox trick does not work anymore.. Do you have any idea why? Keep up the good work!
Can you do a video on using Barba in Steroids for page transitions?
The image I display first doesn't show the caption. I need to display the caption. how can I do that?
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
This is how you excel! So deep into it!
Any way to make this work on non button elements?
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]
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
if i have to show title below images when showing lightbox what to do???
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?
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!
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
can you do the same but with a video popup?
thanks bro. but why in media carousel there is no place for "link" ? so i cannt make lightbox in it
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?
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
Oooh Boi! You've earned a new sub! That was amazing!
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
This worked for me with just the image widget. Very nice!
First comment. Thank u very much..! Lot of love from Sri lanka ❤️💪
Hello
Oooh Boi! Is there also a premium version of that plugin availiable?
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..
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
Your videos are really helpful. That was brilliant. Thanks for the effort.
太棒了，這問題困擾了我好久，終於找到解決方案了，感謝!
hi it is not working in case
Does this trick work with dynamic elements?
This is awesome 😊 thanks for your tricks and tutorials
I didn't know this trick, thanks a lot for the video!
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
Your tutorial is very tricky and very helpful for us thank you so much
Exactly what I was looking for. Thank you!
Can't wait to see the demo with anime js that this plugin has been added to new version, keepin update mybro
This helped me SO MUCH!!! Thank you!
The trick is really amazing, Good Luck bro.
As the title said, I thought it was any kind of link, youtube video coming from custom field, does not work ... :(
can u make a tutorial on how to build / code a custom elementor block
A great solution. Exactly what iI was looking for. Thank you very much
You are the greatest! Awesome tutorial, keep up the amazing work!
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.
It is so useful sir, Thank You😊
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?
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. ruclips.net/video/m2QCUcEiuMQ/видео.html
You're a life saver! Thank u so much for this
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 ;-)
Very cool. Thank you.😃😃
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!
unfortunately this does not work for video lightbox.
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! :)
Excellent! Just what I was looking for ;)
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]
Amazing ❤️ Keep it up man 👍
Thank you so much from Belgium !!
This is very helpful, thank you
Incredibly inteligent! Thank you!
sos un genio. algún día comeremos un asado. abrazo! me zafaste un laburo!
And if in this case it is a dynamic gallery
Absolutely great, i have learn new thing. thank you.
Amazing and very help full for me, Thank You.
Absolute legend! Thank you very much
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 RUclips 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 RUclips 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 ✌️
You are the best!! thank you so much for this
You're so welcome!
This is awesome! Thank you very much!
How can i learn more from you?
What did you mean?
@@OoohBoi can you please send me a link to read to understand your pseudo extension, i really don't know how to use it
Also please i always find myself doing boring layouts, how do i improve
Nice !
Thanks for the tips ;)
Happy to help!
This is very useful, thanks!
You're welcome!
great idea 😎
Happy New Year! When are new videos?
Great tutorial!
Great tutorials.
Thanks!
wee need your videos !!!!
Its excellent. Pretty good
nice trick..but who can remember all this :-)
wish there was a simpler way!:
Thank you so much.
Genius!