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 :)
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
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.
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
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??
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?
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!
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!
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
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!
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?
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
3 ปีที่แล้ว
Nice and useful again !!! Keep posting more often Bro !!!
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
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? 🤣
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..
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.
@@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 ✌️
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.
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! :)
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!😊
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 🤥
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 ? :)
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 :)
I have been searching for this onclick image carousel, so glad I found 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
Hello
Oooh Boi!
I have used this on my site. Everything turned out easily. Thank you! Continue to shoot interesting videos!
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 :)
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!
This is how you excel! So deep into it!
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
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
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!
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.
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
First comment. Thank u very much..! Lot of love from Sri lanka ❤️💪
This worked for me with just the image widget. Very nice!
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]
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??
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?
Oooh Boi! You've earned a new sub! That was amazing!
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!
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!
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
Can we make this for Videos as well?
I tried to do this on a Slide button from Elementor, but it does not works
Your videos are really helpful. That was brilliant. Thanks for the effort.
Can you explain how we put the logo in the middle between the menu please
The trick is really amazing, Good Luck bro.
Any way to make this work on non button elements?
The image I display first doesn't show the caption. I need to display the caption. how can I do that?
太棒了，這問題困擾了我好久，終於找到解決方案了，感謝!
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 do a video on using Barba in Steroids for page transitions?
Hi, thanks for the video. How did you get the main gallery, the one with the smaller image on the right?
image link added but same image is appeared twice in the lightbox, how to fix it.
This is awesome 😊 thanks for your tricks and tutorials
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!
I didn't know this trick, thanks a lot for the video!
Exactly what I was looking for. Thank you!
if i have to show title below images when showing lightbox what to do???
A great solution. Exactly what iI was looking for. Thank you very much
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 do the same but with a video popup?
Your tutorial is very tricky and very helpful for us thank you so much
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
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 ;-)
This helped me SO MUCH!!! Thank you!
You are the greatest! Awesome tutorial, keep up the amazing work!
thanks bro. but why in media carousel there is no place for "link" ? so i cannt make lightbox in it
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
Can't wait to see the demo with anime js that this plugin has been added to new version, keepin update mybro
You're a life saver! Thank u so much for this
It is so useful sir, Thank You😊
Wow, thank you so much for this informative 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
Excellent! Just what I was looking for ;)
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
Hello
Oooh Boi! Is there also a premium version of that plugin availiable?
Incredibly inteligent! Thank you!
Does this trick work with dynamic elements?
Thank you so much from Belgium !!
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..
Amazing ❤️ Keep it up man 👍
Very cool. Thank you.😃😃
As the title said, I thought it was any kind of link, youtube video coming from custom field, does not work ... :(
Absolute legend! Thank you very much
hi it is not working in case
Absolutely great, i have learn new thing. thank you.
This is very helpful, thank you
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.
You are the best!! thank you so much for this
You're so welcome!
Amazing and very help full for me, Thank You.
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 ✌️
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
can u make a tutorial on how to build / code a custom elementor block
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!
great idea 😎
This is awesome! Thank you very much!
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]
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?
sos un genio. algún día comeremos un asado. abrazo! me zafaste un laburo!
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! :)
Nice !
Thanks for the tips ;)
Happy to help!
Great tutorial!
This is very useful, thanks!
You're welcome!
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
Its excellent. Pretty good
unfortunately this does not work for video lightbox.
wee need your videos !!!!
Great tutorials.
Thanks!
And if in this case it is a dynamic gallery
Genius!
Thank you so much.
Happy New Year! When are new videos?
Thanks!
Welcome!