Jump to content

Always show caption lightbox mobile

Recommended Posts

  • 10 months later...

Hey,

I was having the same issue on my site so I thought I'd share my solution in case it helps someone else.

As the dot is a link, I didn't want to mess around with any Javascript to automatically activate it. Instead I gave it a background colour and then rounded it to make it look like a bigger dot.

Here's the code to be added in Design > Custom CSS:


.sqs-lightbox-meta-trigger {
 background-color: #000;
 border-radius: 50%;
}

Hope it'll help someone!

Link to comment
  • 2 years later...
  • 3 weeks later...

@vic18t

Try changing the padding to expand the active area for the button:
.sqs-lightbox-meta-trigger { padding-top: 15% !important; padding-left: 90% !important; }

Increase size and add a new color if you want the dot to stand out (replace "red" with your color code ex: #bcbcbc):
.sqs-lightbox-meta-trigger { padding-top: 15% !important; padding-left: 90% !important; color: red !important; font-size: 3em !important; }

Let me know if that works.

Edited by C-A
Link to comment
  • 3 months later...
On 3/10/2020 at 10:46 PM, mpressgranger said:

Thank you @Vic18t - that worked perfectly! Any chance you also know how to change that dot into a text that reads "more info" instead of just the dot? Seems like an easy adjustment but I can't figure it out. 

If you share link to your site. I can take a look

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
  • 3 months later...

I found something like this on another post. Can't find it now, but thought I'd ad it here if it's any help.

a.sqs-lightbox-meta-trigger {
    width: 100% !important;
    visibility: hidden;
    font-size:15px !important;
    color: #DEB74E !important;
}
a.sqs-lightbox-meta-trigger:before {
    content: "Tap For More Info";
    visibility: visible;
}

Link to comment

***

Second option.
Shows captions all the time, NO click/tap for more.

// Shows the captions all the time
.sqs-lightbox-meta.overlay-description-visible {
 bottom: 0px !important;
}

// Hide the "dot" I'm using the Dark lightbox, so I color the dot dark, which blends in with the background.
a.sqs-lightbox-meta-trigger {
    color:#111 !important;
}

Link to comment
  • 1 month later...
On 8/2/2020 at 2:54 AM, gsimms said:

***

Second option.
Shows captions all the time, NO click/tap for more.

// Shows the captions all the time
.sqs-lightbox-meta.overlay-description-visible {
 bottom: 0px !important;
}

// Hide the "dot" I'm using the Dark lightbox, so I color the dot dark, which blends in with the background.
a.sqs-lightbox-meta-trigger {
    color:#111 !important;
}

Awesome ! It worked for me 😉 

Thanks !

Link to comment
  • 10 months later...

Thanks, folks. This fixed my issue. Both of the following options worked for me, but I decided to go with captions always on in the end. Here's the code I used in Brine:

//change dot to open captions on mobile//

.sqs-lightbox-meta-trigger {
padding-top: 25% !important;
padding-left: 90% !important;
color: #C1D32F !important;
font-size: 1em !important;
font-family: 'BikoBold'!important;
margin-right:50px;
margin-bottom:50px;}

a.sqs-lightbox-meta-trigger:before {
content: "Click here";      
visibility: visible;}

You could change the colour of the text, font size, font, etc. I also added in margins to move the text a bit up and over from the bottom corner. Obviously, someone could also change Click here to whatever they wanted. 

In the end I went with code from above that just made the captions come up always: 
//Show gallery captions all the time on mobile//
.sqs-lightbox-meta.overlay-description-visible {
 bottom: 0px !important;
}

Link to comment
  • 6 months later...

 

On 8/2/2020 at 2:54 AM, gsimms said:

***

Second option.
Shows captions all the time, NO click/tap for more.

// Shows the captions all the time
.sqs-lightbox-meta.overlay-description-visible {
 bottom: 0px !important;
}

// Hide the "dot" I'm using the Dark lightbox, so I color the dot dark, which blends in with the background.
a.sqs-lightbox-meta-trigger {
    color:#111 !important;
}

This worked like a charm for me. I am wondering though if anyone knows how to make the caption show at all times on the desktop version too, so there's no need to hover to see the caption in the lightbox?

Thanks!

Link to comment
On 1/17/2022 at 6:32 PM, Dsimons said:

 

This worked like a charm for me. I am wondering though if anyone knows how to make the caption show at all times on the desktop version too, so there's no need to hover to see the caption in the lightbox?

Thanks!

Can you share link to page where you use image? We can check the code to achieve this

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...
14 hours ago, rudboi3585 said:

Hello! @Dsimons, I see that you figured out how to do this for desktop... Could you share how you edited the code to achieve that as well? Thank you!

Hi @rudboi3585,

I used the following code to show the caption at all times:

/* Always show lightbox caption */
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1!important;
    position: center !important;
    background: rgba(0,0,0,0.5);
}

Let me know if it works 🙂

Link to comment
  • 11 months later...
On 8/17/2023 at 2:17 AM, LemonstrikeCreativeStudios said:

@tuanphan Hey there! I'm having this issue as well on mobile, but none of the code above is working. Curious if it's due to change in code over time, but would you mind taking a look?

Page: https://californiochocolate.com/cacao-origins

My goal is to have the captions on the gallery images always appear (not just on hover) on both desktop and mobile. TIA!

Add to Custom CSS box

/* Show image caption on mobile */
@media screen and (max-width:900px) {
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: rgba(0,0,0,0.7) !important;
    bottom: 10px !important;
}}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/19/2023 at 12:33 AM, tuanphan said:

Add to Custom CSS box

/* Show image caption on mobile */
@media screen and (max-width:900px) {
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: rgba(0,0,0,0.7) !important;
    bottom: 10px !important;
}}

 

@tuanphan Thanks so much! This finally worked 🙂 Have a great week!

Edited by LemonstrikeCreativeStudios
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.