Jump to content

Lightbox Secondary Image on Fluid Engine Gallery

Recommended Posts

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?

Link to comment
  • 2 weeks later...

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);
}

image.thumb.png.e8abac86f4c509ab98b7cc607cd8fc09.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

image.png.97742633705e0d80804226a6714e1c3a.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

image.png.1903ecf31ad910f145ac447b7caaee77.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.