Auto List Carousel Section Image link

Good day! 

Is it possible to have a link on the image on list section of Squarespace? The only options are link on button and hyperlink on description, but I would like the photos to be clickable too. It is in my Trending Section page.

Thank you!

Hi. We can use code to move button link to image link.

If you need to use button for another purpose. You can add a text link on description, we will use code to convert that link into button.

What do you think?

I think this is great! Thank you :)

@tuanphan, is there a way to make sure that when the image is clicked, the URL is opened in a separate web browser? 

On 12/15/2021 at 1:22 AM, CourtCro said:

@tuanphan, is there a way to make sure that when the image is clicked, the URL is opened in a separate web browser? 

This will require JavaScript code. Can you share link to your site? We can tweak the code easier

Hi @tuanphan,

Is the code you posted specific to Mary's wesbite or can it be used on any Squarespace? 

On 1/27/2022 at 8:20 AM, schoolkit said:

Hi @tuanphan,

Is the code you posted specific to Mary's wesbite or can it be used on any Squarespace? 

Any sites, but with homepage only. If you want to it affect on other pages, remove body.homepage from the code

On 9/11/2021 at 8:28 PM, tuanphan said:

Add to Design > Custom CSS

/* List Section - Make list images clickable - @tuanphan */
body.homepage li.list-item {
    position: relative;
}
body.homepage .list-item-content__button-container {
    position: static;
}
body.homepage a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

 

Hey @tuanphan is there a way to tweak the code so the link is only applied to the image or heading but not the description? 

I have a couple of different links embedded in my description and when I apply this code it makes the entire list including description clickable which overrides existing links.

Thanks so much!! 🙂

When I applied the above code to my list section it made everything clickable including the description, and it overrided links embedded in it

On 11/2/2022 at 9:11 AM, melaniejaane said:

Hey @tuanphan is there a way to tweak the code so the link is only applied to the image or heading but not the description? 

I have a couple of different links embedded in my description and when I apply this code it makes the entire list including description clickable which overrides existing links.

Thanks so much!! 🙂

 

When I applied the above code to my list section it made everything clickable including the description, and it overrided links embedded in it

TO apply to image only, you will need to use <script code> If you use a Business Plan or higher, please share link to page where you use carousel, we will check & give new code

Hi @tuanphan I'm wondering if an alteration of this code could be used to add links to images in a carousel gallery section... 

For context, you can see the specific carousel gallery just above the footer of this website I'm building. (FYI I have added code to autoscroll)

Thanks in advance for any advice you may have!

On 2/28/2023 at 7:44 AM, jdclimbtree said:

Hi @tuanphan I'm wondering if an alteration of this code could be used to add links to images in a carousel gallery section... 

For context, you can see the specific carousel gallery just above the footer of this website I'm building. (FYI I have added code to autoscroll)

Thanks in advance for any advice you may have!

You mean this?

Even further down @tuanphan... the auto scrolling logos in the carousel gallery just above the footer (screenshot attached).

Currently, clicking on the banner allows you to pause the scroll or to manually scroll left or right. Instead, I would love to be able to add links to each of the logos (for example, clicking the 'Buff' logo would take you to the Buff website).

Any ideas? Thank you in advance!

On 3/6/2023 at 10:25 PM, jdclimbtree said:

Even further down @tuanphan... the auto scrolling logos in the carousel gallery just above the footer (screenshot attached).

Currently, clicking on the banner allows you to pause the scroll or to manually scroll left or right. Instead, I would love to be able to add links to each of the logos (for example, clicking the 'Buff' logo would take you to the Buff website).

Any ideas? Thank you in advance!

 

First, enable Carousel Buttons > Add button + link > Then add this to Design > Custom CSS (this code will hide button then)

.user-items-list-item-container[data-section-id="63db83ce0dd85f24aa9cedd0"] {
	li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}
}

If it doesn't work, keep the code & let me know, we can check it again easier

You rule @tuanphan thank you! I really appreciate the help, to both this question and the numerous other answers of yours that I have learned from throughout the Squarespace forum. Cheers!