Lightbox Secondary Image on Fluid Engine Gallery

I currently display product colors in a simple gallery using fluid engine. Client would like to have a lightbox enabled that shows an install image rather than showing the same image blown up which is what automatically happens when enabling the lightbox function. They'd like to have that lightbox image change for each color. Is this achievable with custom CSS or some basic code?

Can you share link to page where you use gallery? We can check easier

URL : https://www.cielo.us/colors

I'd like to accomplish the request for each gallery of colors

You mean clicking on each item >> Show a lightbox, you can use a custom image in this lightbox?

Yes. They'd like to show a secondary image in the lightbox when a color is clicked.

You can enable Lightbox, then we can use CSS code to replace image in lightbox with new image

Ok I will enable lightbox on the galleries. What is the CSS I'd need to plug in?

This is code for image 4, 5, 6, if it is what you want, I will give code for all images

Add to Website > Website Tools (under Not Linked) > Custom CSS
 

[data-slide-url="a00ja82kshs0p3zh2jxjfjdaaqovlo"] img {
    content: url(https://cdn.pixabay.com/photo/2024/01/08/15/54/defile-8495836_1280.jpg);
}
[data-slide-url="xdqn7rqgo6acw78xfjqcexl9w8bqit"] img {
    content: url(https://cdn.pixabay.com/photo/2024/01/31/19/25/sunset-8544672_1280.jpg);
}
[data-slide-url="a8tgx89dg8rfnf71n0oekf3vcjyx7a"] img {
    content: url(https://cdn.pixabay.com/photo/2023/08/17/09/29/rock-8196075_1280.jpg);
}

This is great. Thank you. I think I understand how you targeted the lightbox to change the url.

I was able to collect each lightbox tag to replace them. I have one more question... The client is now asking if they can ALSO have the images change on hover to go along with changing it in each lightbox. Is this possible?

On 2/9/2024 at 3:51 AM, designfordummies said:

I was able to collect each lightbox tag to replace them. I have one more question... The client is now asking if they can ALSO have the images change on hover to go along with changing it in each lightbox. Is this possible?

Change these images on hover, or change image in lightbox on hover?

Yes. Change the grid images on hover, not the lightbox.

Use this CSS code, you can repeat similar for other items

[data-section-id="6543d53ecc05e41ab97853b2"] {
figure:nth-child(1):hover img {
    content: url(https://cdn.pixabay.com/photo/2024/01/08/15/54/defile-8495836_1280.jpg);
}
figure:nth-child(2):hover img {
    content: url(https://cdn.pixabay.com/photo/2024/01/31/19/25/sunset-8544672_1280.jpg);
}
figure:nth-child(3):hover img {
    content: url(https://cdn.pixabay.com/photo/2023/08/17/09/29/rock-8196075_1280.jpg);
}}

Use this free tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff