Jump to content

Adding captions only to lightbox mode using CSS

Recommended Posts

Hey,

I was wondering if anyone can help me make it so an image's description text ONLY shows when the image is viewed in lightbox mode. I currently have a masonry gallery on my site, and hate how it gets disrupted when the descriptions are turned on. Is there a way to disable it from being viewed in the grid and only have it shown when someone clicks on the image and has the lightbox mode on?ย 

ย 

If possible, can this be done using just CSS without injecting code into the footer, etc. But if that's the only way then so be it.ย 

Link to comment

Can you send a link to the page? I will check if it's possible only with CSS or JavaScript injection is also required

๐Ÿ‘จโ€๐Ÿ”ง๐Ÿ‘จโ€๐Ÿ’ปย Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

๐Ÿ™‹โ€โ™‚๏ธย Squarespace Custom Web Development & Design

๐Ÿ“…ย Manage Tasks, Take Notes, and Upload Related Images

๐Ÿ“นย Squarespace Tutorials for free - YouTube๐Ÿ“นย 

๐Ÿ’ฏ๐Ÿš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

๐Ÿ™‹โ€โ™‚๏ธย Let's connect on LinkedIn

ย 

ย 

Link to comment

Can you activate the captions on the gallery?ย 
We can hide it with CSS in regular view and see if they appear in the data of the lightbox

๐Ÿ‘จโ€๐Ÿ”ง๐Ÿ‘จโ€๐Ÿ’ปย Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

๐Ÿ™‹โ€โ™‚๏ธย Squarespace Custom Web Development & Design

๐Ÿ“…ย Manage Tasks, Take Notes, and Upload Related Images

๐Ÿ“นย Squarespace Tutorials for free - YouTube๐Ÿ“นย 

๐Ÿ’ฏ๐Ÿš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

๐Ÿ™‹โ€โ™‚๏ธย Let's connect on LinkedIn

ย 

ย 

Link to comment
7 hours ago, sorca_marian said:

Can you activate the captions on the gallery?ย 
We can hide it with CSS in regular view and see if they appear in the data of the lightbox

Hey, just added them! Sorry for getting back to you so late. Appreciate all the help in advance!ย 

Link to comment

It will require some time because it does not appear in the HTML of the lightbox.
I am very busy at the moment

๐Ÿ‘จโ€๐Ÿ”ง๐Ÿ‘จโ€๐Ÿ’ปย Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

๐Ÿ™‹โ€โ™‚๏ธย Squarespace Custom Web Development & Design

๐Ÿ“…ย Manage Tasks, Take Notes, and Upload Related Images

๐Ÿ“นย Squarespace Tutorials for free - YouTube๐Ÿ“นย 

๐Ÿ’ฏ๐Ÿš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

๐Ÿ™‹โ€โ™‚๏ธย Let's connect on LinkedIn

ย 

ย 

Link to comment

Do/will you use Business or Personal Plan?

With Business Plan, I can give you script code to achieve this, there are some available code to achieve this on forum, I can send one.

With Personal Plan, I will give CSS code, but each image will require a line of code, you need to provide some caption text, I will do example for some images.

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
8 hours ago, tuanphan said:

Do/will you use Business or Personal Plan?

With Business Plan, I can give you script code to achieve this, there are some available code to achieve this on forum, I can send one.

With Personal Plan, I will give CSS code, but each image will require a line of code, you need to provide some caption text, I will do example for some images.

I think I'll be sticking with the personal plan so CSS would be great!!ย 

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.