Using Simple Lightbox with the Portfolio

Support
#1

Hello there,

We have an image and video gallery in each portfolio item and would light them to open in a lightbox. I have seen that other Pro users are using Simple Lightbox so I installed this, but it is not working. Can you advise on this at all?

In the plugin settings, there is no option for the portfolio nor other custom post types. I found this user who had a similar problem: Simple Lightbox Layout builder

lightbox-settings
lightbox-settings822×838 46.4 KB

Example portfolio item: https://leslieh24.sg-host.com/development/mulberry-rockingham-gateway/

Please click the Gallery tab indicated in this image:

gallery-tab
gallery-tab1268×390 28.6 KB

Any advice here would be great - a lightbox is a standard bit of kit so I know I am missing something.

Cheers!

Spencer

#2

Hello @LHDPro,

Thanks for writing to us.

Please note that the plugin would work on the page/post content images, I checked your settings it seems that you have called the image in your post layout with the looper. I would suggest you please have a look at this thread to setup the lightbox on the image or video.

Hope it helps
Thanks

#3

Hi @prakash_s,

Thank you for this. Before I go in this direction is the suggestion that I replace the current galleries I have with sliders in order to get the lightbox to work? Or do I just follow the part of the guide about adding the class and the raw code shortcode?

Thanks!

Spencer

#4

Hello Spencer,

You don’t need to create a slider to get the lightbox working. You need to add the custom CSS to the image element and add the image URL in the Image link option. Now you can place the Raw content element where you need to add the shortcode as mentioned in the given thread.

Hope it helps
Thanks

#5

Hi @prakash_s,

Thanks for getting back to me. I have this working for the images now, so that’s brilliant. Does this method also work for video? The video element does not have a link option in the settings.

Thanks!

Spencer

#6

Hello Spencer,

I would suggest you please use the modal element for the video lightbox. Please have a look at the screenshot below.

About-The-Tests-Page-Cornerstone (3)
About-The-Tests-Page-Cornerstone (3)628×548 26.4 KB

Hope it helps
Thanks

#7

Thanks @prakash_s,

Is it possible to cycle through the modals in the same way as the lightbox? The difference in functionality is a bit odd :-]

I found this old query talking about the same: Lightbox For video does not work anymore. Also need button

Thanks,

Spencer

#8

Hello Leslie,

Be advised that the Lightbox shortcode has been deprecated. We suggest to use the Modal element. You can then insert a Slider element inside the Modal content. With the help of the data-x-slide-goto attribute, you can cycle through the slides as someone clicks on the image. Perhaps this video can help:

https://www.youtube.com/watch?v=do45n9xMUVo

Hope this helps.

#9

Hi @ruenel,

Thanks for getting back.

I am struggling to get this working.

In the video, Josh manually adds the slide number to each navigation item’s custom attributes.

attributes

I can’t move the video element inside the slider container, so do I add data-x-slide-goto to the slider navigation Left/Right buttons?

Thanks!

Spencer

#10

Hello Spencer,

You will need video thumbnails so that you can use it as the Toggle for each video. A recommended custom field is needed for the video thumbnails.

Hope this makes sense.

#11

Hi @ruenel,

Do we need to add the thumbnails as featured images?

Thanks!

Spencer

#12

Hello Spencer,

Yes, you need a thumbnail to toggle the video.

Thanks

#13

Hi @ruenel,

Ok, great. Thanks for your help.

Kind Regards,

Spencer

#14

You are most welcome, Spencer.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.