Add button on gallery page slideshow

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

Can you add text link first? Then I can give code to make text link to button.

It brings up another question how can I add the text link over the slideshow-gallery? 

54 minutes ago, SunnyHung said:

It brings up another question how can I add the text link over the slideshow-gallery? 

Try. 

Not sure I will help..

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?

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.

I added the text link. Thanks

I mean text link... not image link

It seems your squarespace version doesnt support this.

In SS 7.0, you can use Gallery Block to add text/link..

Ys...It is in SS7.1. Any other method?

You can use this plugin to bring back Gallery Block. 

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

I have one as well for achieving slideshows with content overlaid in 7.1 — www.squareaddons.com 

On 5/13/2020 at 2:13 PM, SunnyHung said:

It brings up another question how can I add the text link over the slideshow-gallery? 

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

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>

On 6/4/2020 at 10:56 AM, christyprice said:

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

 

This was perfect, thank you! Is it possible to use video in place of the image thumbnail?

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

@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?

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?

Can you share link to this page?

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.

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.