Jump to content

Add button on gallery page slideshow

Recommended Posts

Site URL: https://www.infinityhk.org/

I would like to add button to the slideshow-gallery. 1 button per 1 slide. I found this code in the forum but it does not work for me. Please kindly advise.

 

Website pw: abcd1234

 

section#ingredients-gallery .Index-gallery-wrapper .Index-gallery-item p:last-child { background: #fff; color: #000; display: block; max-width: 200px; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; border-radius: 10px; }

Link to comment

Thanks!!! I added the text over the slide-gallery. But it seems that it can only retrieve the description of the photo.

 

If I want to make it like the below pic having 2 font style with a action button linking to other page, what should I do?image.thumb.png.497bbdc7bc7ea9bd84750757f5961497.png

Link to comment
37 minutes ago, SunnyHung said:

Thanks!!! I added the text over the slide-gallery. But it seems that it can only retrieve the description of the photo.

 

If I want to make it like the below pic having 2 font style with a action button linking to other page, what should I do

If you can add text link in description, i can give code to break text in new line + convert to button.

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
  • 3 weeks later...

@SunnyHung, I have a video on a workaround that allows you to add buttons to slideshows. 

 

Link to comment
  • 2 years later...
16 hours ago, BradleyRW said:

Did you get an answer to add a button or text over a slideshow gallery? I would love to know how to do that.

Add a Gallery Slideshow Section

Paste this code to Page Header

<style>
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    position: absolute !important;
    top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 80%;
    margin-top: 0;
    height: auto;
}

figcaption.gallery-caption.gallery-caption-fullscreen-slideshow h4 {
    margin: 0;
}
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow a {
    background-color: white;
    padding: 10px 20px;
    margin-top: 20px;
    display: inline-block;
    border-radius: 50px;
}

</style>

Next, edit each image > Enter this code to Description box

<h4>text text</h4>
<a href="https://google.com">Read Out more</a>

image.thumb.png.60de79cdb026aecfb14fed20e841d478.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
  • 1 month later...

@thilldesign I haven't tried that - keep us posted!

Link to comment
  • 9 months later...
6 hours ago, jlg185 said:

@tuanphan, thanks for posting that code. That was exactly what I was looking for. However, now I have extra space below the Gallery Slideshow. Do you know how to get rid of it?

Screen Shot 2023-06-27 at 7.38.12 PM.png

Can you share link to this page?

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

It's not published yet but I figured out that the extra space is a result of using the caption/description. I'm just not sure how to get rid of it after using your code to move the caption/description to the center of the gallery slideshow.

Link to comment
On 6/29/2023 at 1:26 AM, jlg185 said:

It's not published yet but I figured out that the extra space is a result of using the caption/description. I'm just not sure how to get rid of it after using your code to move the caption/description to the center of the gallery slideshow.

You can follow this guide to share url.

 

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.