How to trigger Lightbox in Elementor from any type of link (no PRO needed)

[@franktielemans6624]

Damn, that's brilliant! I can imagine the eureka moment when you discovered this trick.

[@OoohBoi]

Well... I don't wanna brag but I worked on it for over two years 🤥

[@iasonasperperis2183]

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?

[@lmweb39]

do u find a solution for that i search it ? :)

[@irugal8964]

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!😊

[@wpeasy]

Too easy.. The world needs more people like you :)

[@stevechong65]

This is how you excel! So deep into it!

[@raauw7382]

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

[@omisenker]

I have been searching for this onclick image carousel, so glad I found this!

[@ronineditor9920]

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.

[@nomer9998]

Hello Oooh Boi! I have used this on my site. Everything turned out easily. Thank you! Continue to shoot interesting videos!

[@siminandrei1950]

Amazing! I searched for this for weeks. Thank you very much!

[@tsykin]

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 :)

[@taufiqulhaque838]

Simple and to the point. Thank you! Saved a lot of time linking videos on my client's page.

[@Evovisions1]

hello. any addtional steps needed to link videos, because i am trying and i can't seem to do it right

[@wdronju]

Your tutorial is very tricky and very helpful for us thank you so much

[@MichaelPoliskey]

This worked for me with just the image widget. Very nice!

[@ManOnBass]

I didn't know this trick, thanks a lot for the video!

[@walkingmen2]

太棒了，這問題困擾了我好久，終於找到解決方案了，感謝!

[@PatrizioRomanoDellAnna]

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.

[@forlanistudio7493]

Can you explain this point? How i can get only the url of first image of the gallery generated with ACF?

[@PatrizioRomanoDellAnna]

@@forlanistudio7493 at the moment I can't remember exactly the point, if you have time I'll be back to you asap.

[@forlanistudio7493]

@@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.

[@forlanistudio7493]

@@PatrizioRomanoDellAnna Did you happen to see this?

[@bethjosey4298]

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

[@GiuliaRaciti]

Exactly what I was looking for. Thank you!

[@zeeshanmohy-ud-din2312]

Your videos are really helpful. That was brilliant. Thanks for the effort.

[@iamakram22]

This is awesome 😊 thanks for your tricks and tutorials

[@kowsharalam7675]

Oooh Boi! You've earned a new sub! That was amazing!

[@ionicagencia9725]

A great solution. Exactly what iI was looking for. Thank you very much

[@travellingkoi1138]

This helped me SO MUCH!!! Thank you!

[@bestfriendfhn]

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

[@OgaBally]

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.

[@omatheuscisco]

O meu também está com esse mesmo erro.

[@rkitleli]

Add a space on both sides of the pipe. [data-elementor-lightbox-slideshow | d742e8d]

[@DouglasMcArthurSilva]

You're a life saver! Thank u so much for this

[@najneenakhter2987]

It is so useful sir, Thank You😊

[@LuckyGamage]

First comment. Thank u very much..! Lot of love from Sri lanka ❤️💪

[@riderxo2451]

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. :(

[@stevecucinotta1789]

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!

[@md.al-aminislam6062]

Wow, thank you so much for this informative video!

[@Liav-jc3cm]

You are the greatest! Awesome tutorial, keep up the amazing work!

[@yasminevanallemeersch4011]

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!

[@helloutbe]

Excellent! Just what I was looking for ;)

[@michael.faufra]

Thank you so much from Belgium !!

[@devsdimen5096]

The trick is really amazing, Good Luck bro.

[@latestcentury8374]

Absolutely great, i have learn new thing. thank you.

[@YossefTrabelsi]

Can we make this for Videos as well?

[@atosupriyanto6990]

Can't wait to see the demo with anime js that this plugin has been added to new version, keepin update mybro

[@martinnogue]

I tried to do this on a Slide button from Elementor, but it does not works

[@boysiam]

Very cool. Thank you.😃😃

[@iarghya]

Amazing and very help full for me, Thank You.

[@ana2785]

Incredibly inteligent! Thank you!

[@adrianmedi]

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?

[@travelingislife6097]

Absolute legend! Thank you very much

[@AdemolaAlabi]

This is very helpful, thank you

[@IlseJelsma]

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?

[@chutkisartstudio]

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??

[@Gausch2]

This is awesome! Thank you very much!

[@MattyPod27]

That is nice, I will try this out in my next project ! Thanks !

[@OoohBoi]

Have fun!

[@baapkatheatre4267]

@@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 KZbin 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 KZbin 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 ✌️

[@coasterPK]

great idea 😎

Nice and useful again !!! Keep posting more often Bro !!!

[@OoohBoi]

As much as my spare time allows me to... thanks!

@@OoohBoi we are waiting too long for new video Boi ;-)

[@maximartin]

sos un genio. algún día comeremos un asado. abrazo! me zafaste un laburo!

[@Brenuco]

You are the best!! thank you so much for this

[@OoohBoi]

You're so welcome!

[@---hm8dk]

Can't seem to do it now, anyone knows why? Tried on a fresh button , still not working.

[@rkitleli]

Add a space on both sides of the pipe. [data-elementor-lightbox-slideshow | d742e8d]

[@thegrowtheffect]

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!

[@saralaratro1346]

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

[@annacattermole126]

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? 🤣

[@Mazmetron]

Turn off 'autoplay' option on the gallery

[@saralaratro1346]

The image I display first doesn't show the caption. I need to display the caption. how can I do that?

[@jaberchetuan584]

Amazing ❤️ Keep it up man 👍

[@DigitalDesigns1]

Can you do a video on using Barba in Steroids for page transitions?

[@hirenwebs]

image link added but same image is appeared twice in the lightbox, how to fix it.

[@mdqmatias]

This is very useful, thanks!

[@OoohBoi]

You're welcome!

[@teuccio73]

wee need your videos !!!!

[@graphixjack3285]

Thanks!

[@NiceTryAmigo]

Great tutorial!

[@Ars3niX]

Nice ! Thanks for the tips ;)

[@OoohBoi]

Happy to help!

[@jonathanespinoza8723]

Its excellent. Pretty good

[@sadiquepatel341]

hi it is not working in case

[@DKingFisher]

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

[@felipeconte646]

Thank you so much.

[@nitinplayss19]

if i have to show title below images when showing lightbox what to do???

[@hamedo5109]

Can you explain how we put the logo in the middle between the menu please

[@marksson]

Genius!

[@nbeizaie]

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?

[@bestfriendfhn]

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

[@MKRIDES]

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..

[@albertansah9885]

Great tutorials.

[@OoohBoi]

Thanks!

[@MrSchneemaa]

my maann!!

[@pier2740]

Hi, thanks for the video. How did you get the main gallery, the one with the smaller image on the right?

[@ThaiMac]

unfortunately this does not work for video lightbox.

[@how2dodis]

can you do the same but with a video popup?

[@qasim2646]

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

[@andersonnarciso]

As the title said, I thought it was any kind of link, youtube video coming from custom field, does not work ... :(

[@LuisSanchez-ng6du]

¡Gracias!

[@rianns4068]

thanks bro. but why in media carousel there is no place for "link" ? so i cannt make lightbox in it

[@blagojelukic]

nice trick..but who can remember all this :-) wish there was a simpler way!:

[@philip9677]

can u make a tutorial on how to build / code a custom elementor block

[@user-mn2dp8yq7f]

Amazing as always and thank you thank you.. but I still miss Barba, when will she be here?

[@OoohBoi]

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.

[@stargazerdesign]

@@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! :)

[@viralthings101]

Awesome

[@danilofavero6312]

And if in this case it is a dynamic gallery

[@teuccio73]

Thanks

[@HelloWORLD_Verlag]

Hello Oooh Boi! Is there also a premium version of that plugin availiable?

[@thisisntgio4123]

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.

[@Kal-el23]

Probably a little too late, but you have to remove the image from the gallery so it doesn't show as a duplicate.

[@davivilela]

Does this trick work with dynamic elements?

[@nbeizaie]

Great Video. My filenames are showing under the pics. Is there a way to hide the filenames? Thanks

[@nbeizaie]

I found the solution: go to site setting and go to lightbox section and turn Title-->off

[@lauraluy7911]

Absoluto SuperJob

[@daniele7753]

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..

[@OoohBoi]

That's exactly what I want to know as well!

[@phillipk1118]

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!

[@davemagrum]

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.

[@anticmark3614]

@@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.

[@soulcriativa]

@@anticmark3614 Thanks man, i was about to go crazy on that duplicate.

[@VinceBrusselaers]

Has anyone found a fix to this issue?

[@AntonioCasolinoAdverman]

It does not work for me... could it be due to the latest updates of elementor?

[@rkitleli]

Add a space on both sides of the pipe. [data-elementor-lightbox-slideshow | d742e8d]

[@eliasbermeo9549]

Is there any way that the image of each gallery can open a pop up with different information?

[@Bonnie008]

Hey I'm looking for the same thing. I have multiple buttons that trigger different carousels. have you found a solution?

[@deNysWebDesign]

@@Bonnie008 im not too sure if this is what you are asking but adding it in hopes it will be helpful. kzbin.info/www/bejne/o2O0dIiZes6og7M