Make images clickable in the carousel

On 2/7/2023 at 8:58 PM, yuliamazur said:

Hey @tuanphan! Thanks for your help!

I'm using the commercial plan so I think I'm able to insert the new code. Please send the new one when you can, I'd appreciate this very much!!! 

I think the above code is fine. You can also make code shorter by adding this to Page Header (page where you added Carousel)

<style>
  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;
}
.list-item-content__button-container {
    position: static !important;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}
</style>

6 hours ago, tuanphan said:

I think the above code is fine. You can also make code shorter by adding this to Page Header (page where you added Carousel)

<style>
  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;
}
.list-item-content__button-container {
    position: static !important;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}
</style>

 

Thank you! You're right, the above code was fine! 

But I was facing another problem with it... It didn't let me click & drag the objects of carousel. I've explained this in this comment and added some screen recordings 

After that you told me that you have a solution but I'll need another code for this. Do you still have it? I appreciate your help very much

Thank you in advance!

On 2/11/2023 at 3:31 PM, yuliamazur said:

Thank you! You're right, the above code was fine! 

But I was facing another problem with it... It didn't let me click & drag the objects of carousel. I've explained this in this comment and added some screen recordings 

 

After that you told me that you have a solution but I'll need another code for this. Do you still have it? I appreciate your help very much

Thank you in advance!

Yes. You can remove CSS code I sent, I will give new Java code

I've poured through this and the original code works but I'm wondering how to make it so that the buttons remain?

On 2/18/2023 at 3:13 AM, SlocumMarketing said:

I've poured through this and the original code works but I'm wondering how to make it so that the buttons remain?

What is site url? We can use script code to do this

Hello,  I would like to have clickable carousel images too.  Is there also a way to light box them?

https://www.casasymari.com/bryce

On 2/21/2023 at 4:53 AM, tuanphan said:

What is site url? We can use script code to do this

Hi there,

Website isn't live yet but you can see it here.

https://gopher-pike-pb3p.squarespace.com/ PW: Slocum

On 3/2/2023 at 12:43 AM, digiav4mac said:

Hello,  I would like to have clickable carousel images too.  Is there also a way to light box them?

https://www.casasymari.com/bryce

You will keep button or need to hide it?

Click Image >> Show Description in Lightbox or show large image in lightbox?

On 3/4/2023 at 1:38 AM, SlocumMarketing said:

Hi there,

Website isn't live yet but you can see it here.

https://gopher-pike-pb3p.squarespace.com/ PW: Slocum

You mean this?

Hello, 

would be grateful if you could give me the code for this too! I have added the buttons below each image but would like to hide them and have the image linked instead. Thanks very much. @tuanphan

https://www.collectablecities.com/

(for the carousel below the top banner)

6 hours ago, tuanphan said:

You will keep button or need to hide it?

Click Image >> Show Description in Lightbox or show large image in lightbox?

You mean this?

Yes.  I'd like both the buttons and images to be clickable.

Is it possible to apply the code to multiple sections? 

On 3/6/2023 at 6:57 PM, fancylamp said:

Hello, 

would be grateful if you could give me the code for this too! I have added the buttons below each image but would like to hide them and have the image linked instead. Thanks very much. @tuanphan

https://www.collectablecities.com/

(for the carousel below the top banner)

Add to Design > Custom CSS

/* Make carousel clickable */
.user-items-list-item-container[data-section-id="63b964798747bf1277de70bd"] {
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;
}}

On 3/6/2023 at 1:34 PM, tuanphan said:

You will keep button or need to hide it?

Click Image >> Show Description in Lightbox or show large image in lightbox?

You mean this?

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $( ( ) => {
  
    const selector = '.user-items-list-carousel__slides .list-item';
    
    $( selector ).each ( function ( ) {
    
      const $this = $( this );
      
      $( $this ).click ( function ( ) {
      
      const url = $( '.list-item-content__button', $this )
      
        .attr ( 'href' );
        
      $( `<a href="${ url }" target="_blank">` )
      
      	.get ( 0 )
        
        .click ( );
        
      } );
      
    } );
    
  } );
</script>
  <style>
.user-items-list-item-container[data-section-id="63ee67026492330cee6c0212"] .user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-item-container[data-section-id="63ee67026492330cee6c0212"] .user-items-list-carousel__gutter {
    cursor: pointer;
}
</style>

On 3/7/2023 at 12:01 PM, Maggie90 said:

Is it possible to apply the code to multiple sections? 

Same List Style (Same List simple, same list carousel) or each page will use a different list style?

1 hour ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $( ( ) => {
  
    const selector = '.user-items-list-carousel__slides .list-item';
    
    $( selector ).each ( function ( ) {
    
      const $this = $( this );
      
      $( $this ).click ( function ( ) {
      
      const url = $( '.list-item-content__button', $this )
      
        .attr ( 'href' );
        
      $( `<a href="${ url }" target="_blank">` )
      
      	.get ( 0 )
        
        .click ( );
        
      } );
      
    } );
    
  } );
</script>
  <style>
.user-items-list-item-container[data-section-id="63ee67026492330cee6c0212"] .user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-item-container[data-section-id="63ee67026492330cee6c0212"] .user-items-list-carousel__gutter {
    cursor: pointer;
}
</style>

 

Thanks so much!!! Is there a way to make it so it doesn't open in a new tab?  No worries if not but would be optimal if it's possible.  Thanks!

On 3/10/2023 at 10:46 PM, SlocumMarketing said:

Thanks so much!!! Is there a way to make it so it doesn't open in a new tab?  No worries if not but would be optimal if it's possible.  Thanks!

Just change _blank to _self

Hi All, I have the exact same issue.  I have never done any coding, but I know how to copy and paste!

If there is anybody who can talk a total newb through this I would be very very grateful.  

The site is:  https://www.valueresonance.space/

Here is a screenshot.  I want to make each image clickable to head to their respective pages.

I added the buttons as instructed above.

I see where to add code.  

Not sure if this is the correct place.

I have been trying to copy-paste some of the code above into Design>Custom CSS to see what happens.  So far nothing works.  I am assuming you guys are asking for the URL because there is something in the code specific to that URL, but not sure what it is to edit it.  I don´t see a URL in the code.

Also, each image will go to a different URL, so where will I add the individua URLs for the destination pages for each image? (Update, I think addingthe individual buttons with URL per image deals with this).

I keep experimenting and hope somebody can help.  TX

I've got a similar request. Would like to have a carousel with hidden buttons. 

I've pasted the code from earlier suggestions but it's acting funny, it hides the buttons (great!), but the heading and image are only clickable once in a while, e.g. after I click inspect in the Chrome browser. otherwise I can only drag the images. Any suggestions?

Also, will have a similar carousel on multiple pages, can I add multiple section ID's to add same feature on multiple pages?

Page 1:  https://kumquat-clementine-584b.squarespace.com/barcode-1

Page 2: https://kumquat-clementine-584b.squarespace.com/barcode-2

(and then some more pages that I haven't created yet)

On 3/10/2023 at 1:55 PM, tuanphan said:

Add to Design > Custom CSS

/* Make carousel clickable */
.user-items-list-item-container[data-section-id="63b964798747bf1277de70bd"] {
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;
}}

 

Thanks for getting back to me. I've added to Design > CSS but it hasn't seemed to work, do you know why? 

@fancylamp@tuanphan

yes.  I have the same problem.

I noticed that in the thread above, the dev was asking for the URL.  So this tells me that there is something specific to the URL in the code.  However, I don´t see any url or path in the code.  If we could identify what it is that is specific to the URL, then perhaps we can edit the code and make it work?

I realised that the individual buttons for each image need adding so that the individual url for each image is already there, so this code is supposed to hide the button and make the image into the button.   

I suspect that the part:  

data-section-id="63b964798747bf1277de70bd"]

probably needs editing, as this seems to be an identifier specific to the URL.  The question is, where do we find this ID?  and is this the only thing that changes? 

Update:

Found this and replaced the ID number to see if it works, but still not working, so that was not it! 

@fancylamp

Solved!!!

I was correct that the 

[data-section-id="63eeb40b075f7e3683b0592a"] 

is what needs editing.

I do not know how to identify which number to put in, so here is what I did.

CTRL U (to see code) on your page.

Then CTRL F to `find´(search)

Then I put:  `data-section´ in the search box:

Ans then by trial and error, I copy pasted each ID number into the original code.  as you can see on my site there are 52 instances.  I found the one at no. 12

Here you can see I have it working now:

https://www.valueresonance.space/

Unfortunately, I lost the `dimming´ when you hover over the image, to indicate that there is a click there.  but the button is gone and the links are working!

Now I need to figure out how to get the `hover-dimming´ or whatever that is called, back!

perhaps @tuanphan can help with adding the dimming back in?

Good luck

54 minutes ago, ValueResonance said:

I do not know how to identify which number to put in

Check out Heather Tovey's most excellent looking Squarespace ID Finder.

@creedon

Thanks!

Yer, I found it by trial and error.

I am now trying to get the rollover dimming effect to be the same in the carousel here:

https://www.valueresonance.space/

as it is here i the portfolio:

https://www.valueresonance.space/projects

Not found how to do this yet.  any clues very welcome.  cheers

Hi there! 

I am also trying to create clickable images for my carousel, can you please help with the bit of code necessary? 🙂

Thank you for any and all help! 

@LocoLuxury

the answer is in the thread.  if you look at my post above.   I am a total newb.  I just copy and pasted the code given by the dev and above I highlight where the ID needs to be inserted.  @creedon shows you how to get the ID.  very easy