Connecting a modal to a gallery

Support
#1

Hi guys
I have a gallery on this site
https://www.diamondfinishes.com.au/wp/wordpress/continuous-stone/resins/
Can you help me finalise this build?

  1. I want to add a modal to any image from a trigger, the text layer + that appears on hover.
    On the modal, I want to add a description under the image.
  2. Reveal the rows using a show more " button.
    In the XL viewport,
    start 1 row of 5 then
    Click to reveal another 3 rows of 5, then
    Click to reveal another 3 rows of 5, then
    Click to reveal another 2 rows of 5 and 1 row of 2
#2

Hello @philysgdy,

Thanks for writing in!

1.) You can insert a Modal element next to your Gallery Div element.

image

Then do the following:
1.) Insert a Slider (Stacked)
2.) Use Loopers to display the image in each slide
3.) In each of your Grid Cells, add a custom attribute “data-x-slide-goto” that will correspond to the Slide that displays the big image
4.) You may need to use custom Inline CSS in the cell to display the pointer when hovering the cell.

$el {
  cursor:  pointer;
}

#2.) This is ONLY possible with custom JS code, which is already beyond the scope of our support.

Best Regards.

#3

Hi Rue
I have been using my AI to assist with this build, and it has been very helpful. It generated some custom JS code to display the image, but I wanted to see if you had a more refined approach. It seems I am on the right path.
And I pushed it to add a custom attribute, which created a similar effect to your suggestion. However, as we go back a long way, I wanted to check with you my sanity in using this approach.
Regarding #4, we added custom inline CSS to display a pointer when hovering over the cell. I will go forward and report back.
Thanks for your support as always :pray:.

#4

You’re welcome, Phil.