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
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..

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

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

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

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..

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

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
  • 1 month later...

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.