Trouble setting up lightbox gallery

Support
#1

Howdy, I found and uploaded your lightbox gallery template…and have it setup using acf pro and gallery posts…

https://newsite.onepianoman.com/shop-gallery/

The lightbox works, however, the thumbnail is set to show the featured image of the same post, yet its showing both the same images, even though the looper is set to different post ID’s

Any help is appreciated getting it to show the right image.

Also, how do I make both columns the same height if there are different length of text?

image
image1920×1080 566 KB

#2

Hello @oriol,

Thanks for writing to us.

In order to help you with your concerns, we need to check your settings. I would request please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin-level username and password

You can find the Secure Note button at the bottom of your posts

secure-note
secure-note1040×250 15.3 KB

Thanks

#3

Check secure note

#4

Hello @Oriol,

I have already logged in and checked your page. I found out that you have implemented the Loopers incorrectly. Your structure should be this way:

Section
   Row - Looper Provider Recent Posts
      Column - Looper Consumer
          Image Lightbox Gallery
               Gallery Row
                   Column 1
                       Modal 
                   Column 2 
                       Text
                       Text
                       Text 
                       Button

Please check out the demo I have created in the secure note below for you to see the results.

Best Regards.

#5

Hi, I appreciate this, however, it seams the lightbox is showing the wrong piano. Also, I will be adding up to 25 other pianos, how will I duplicate each column? I tried, but it duplicated the row, so it then shows 4 pianos, 3 of one, and 1 of the other.

It also changes the text in both when I change one…each piano in this page will be different, different prices, descriptive text etc…

The way I had it worked, the lightbox worked etc, it was only the featured image that wasn’t.

Thanks.

#6

Hey Oriol,

The wrong piano is showing up because your Looper Provider in your lightbox has the specific post ID and removing that would fix the issue.

image

#7

I got it working as I wanted by replacing the featured image dynamic content to this:

{{dc:looper:item}}

It now works as it should,. however, Id appreciate some help making the columns even height.

Thanks.

#8

Hello Oriol,

Glad to know that things are well for you.

Thanks

#9

Id appreciate some help making the columns even height.

#10

Hello Oriol,

Please have a look at this video to learn more about how to make columns equal height.

Thanks

#11

I have seen the video many times, however, I cant get it working on my page, again, any help is appreciated.

Also, I have my galleries setup now: https://newsite.onepianoman.com/shop-gallery/

I have lazy load on, however, the page is loading all the images in the lightbox before you open said lightbox, so its loading 60+ images. Is there a way around that?

*Update. I added js from chatgpt to help, but there should be out of the box lazyloading on these things.

#12

Hello Oriol,

I checked the site URL you provided, and the column height appears to be rendering correctly on my end. As for lazy loading, unfortunately, this functionality is not available at the moment. You may want to reach out to a developer who can assist you with implementing this feature, or consider subscribing to One, where customization-related questions are addressed. Please note that custom development falls outside the scope of our support services

Thanks for understanding

#13

Id like to request a feature then :slight_smile: lazy loading for modal images, or lightbox images, for cases such as this.

Thanks.

#14

Hello @Oriol,

Your request has been added to our enhancement list. In the meantime, you can use the Jetpack’s Lazy Loading feature or use 3rd party plugins.

Best Regards.