Make images clickable in the carousel

On 3/14/2023 at 4:06 PM, ValueResonance said:

@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

  

 

 

 

 

 

Thanks for sharing!

That example ID was actually correct for me (you can use a chrome extenstion for squarespace block ids to find these more easily) but i realised some other code i had in there was incorrect so i think that was my problem. Hope the dimmer issue is solved for you soon.

@fancylamp

Yes I did discover how to get the IDs later thanks to @creedon.   We fixed in anyway.  I started a new subject also for the dimmer, but no answers yet.  I have watched all the YT vids on the subject, but none answer it,  also they confuse `portfolio, with `gallery´ in the instructions so as the code is different for different elements or `sections´ this is going to need an expert.  Looking at the code on the portfolio page, it is hard to know which exact bit of code refers to the hover effect.  Gonna need a a heavyweight like @tuanphan to help on this I think.

On 3/17/2023 at 1:50 AM, ValueResonance said:

@fancylamp

Yes I did discover how to get the IDs later thanks to @creedon.   We fixed in anyway.  I started a new subject also for the dimmer, but no answers yet.  I have watched all the YT vids on the subject, but none answer it,  also they confuse `portfolio, with `gallery´ in the instructions so as the code is different for different elements or `sections´ this is going to need an expert.  Looking at the code on the portfolio page, it is hard to know which exact bit of code refers to the hover effect.  Gonna need a a heavyweight like @tuanphan to help on this I think.

Did you solve or still need help?

@tuanphan

I did manage to get the ID and make the images working.  I am now trying to get them to hover in the exact same way as they do in the portfolio.

https://www.valueresonance.space/projects

I started a new post coz it's a new topic.  Will also @ you about another issue, but in the relevant topic.

a thousand thank you's.  It means a lot to know somebody can help when ideas run out!

Hello-

I too would be grateful if you @tuanphan could give me the code for this!

union.gallery

PW:Union831 

Thanks so much

hi i am a newbie in coding...

can any one help please...

i would like to have the images on the banner slideshow to a different pages on the site.

I can add button to click to the page, but preferable to have the image it self clickable.

also how to minimise the size of the arrow 

here is the site

https://mackerel-cone-dscn.squarespace.com/home

here is the password : trial123

Hi Tuan phan - would you also be able to help us out 🙏

https://www.kerbocharge.com/

To make each carousel image clickable to the news stories. Ideally would remove the buttons but don't know if that's possible.

Thanks in advance!

On 3/19/2023 at 11:44 PM, ValueResonance said:

@tuanphan

I did manage to get the ID and make the images working.  I am now trying to get them to hover in the exact same way as they do in the portfolio.

https://www.valueresonance.space/projects

 

I started a new post coz it's a new topic.  Will also @ you about another issue, but in the relevant topic.

a thousand thank you's.  It means a lot to know somebody can help when ideas run out!

 

 

Sorry. Missing your comment. Do you still need help on this?

On 3/20/2023 at 7:18 AM, NOLAGallery said:

Hello-

I too would be grateful if you @tuanphan could give me the code for this!

union.gallery

PW:Union831 

 

Thanks so much

Which carousel are you referring to?

On 3/23/2023 at 6:40 PM, Plughunter said:

Hi Tuan phan - would you also be able to help us out 🙏

https://www.kerbocharge.com/

To make each carousel image clickable to the news stories. Ideally would remove the buttons but don't know if that's possible.

Thanks in advance!

Add to Design > Custom CSS

body.homepage {
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;
}}

@tuanphan

Solved.  thanks.  I @ you in a different thread about another issue. Thanks

On 3/11/2023 at 12:29 AM, tuanphan said:

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

Yes same list style 😄

On 3/25/2023 at 10:15 PM, tuanphan said:

Sorry. Missing your comment. Do you still need help on this?

Which carousel are you referring to?

Add to Design > Custom CSS

body.homepage {
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;
}}

 

@tuanphan it worked, you're the best, many thanks!

On 3/31/2023 at 6:36 AM, Maggie90 said:

Yes same list style 😄

Sorry. Missing your comment. Do you still need?

Hi! 

I need help hiding the buttons on my portfolio (featured works) Carousel. The link to my page is https://www.raquelwilkins.com/

On 2/15/2023 at 8:22 PM, tuanphan said:

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

Hi @tuanphan, I have injected your code so that the images are clickable. You also mentioned that there is an additional Javascript code to make the click and drag function still available.

please would you be able to share it? Would be absolutely amazing to have it here thanks so much for everything!!

7 hours ago, Dilon said:

Hi @tuanphan, I have injected your code so that the images are clickable. You also mentioned that there is an additional Javascript code to make the click and drag function still available.

please would you be able to share it? Would be absolutely amazing to have it here thanks so much for everything!!

@tuanphan with the help of your code and Chat GPT, we are able to somewhat get the below code, what it does is that, it removes the clickable function for mobile. I and with the help of gpt (past 1 day trying different prompt) failed to get the click and drag function to still work. I think click and drag to move through the carousel is very intuitive and important, would be amazing if you could help!

 

// Make carousel image clickable, disables in mobile
li.list-item {
  position: relative;
}

.list-item-content__button-container {
  position: static;
}

@media (min-width: 768px) {
  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;
  }

  .user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
  }
}

@media (max-width: 767px) {
  .list-item-content__button-container {
    position: static !important;
  }

  .user-items-list-carousel__slide {
    pointer-events: none !important;
    user-select: none !important;
  }
}

On 4/11/2023 at 4:09 PM, Dilon said:

@tuanphan with the help of your code and Chat GPT, we are able to somewhat get the below code, what it does is that, it removes the clickable function for mobile. I and with the help of gpt (past 1 day trying different prompt) failed to get the click and drag function to still work. I think click and drag to move through the carousel is very intuitive and important, would be amazing if you could help!

 

// Make carousel image clickable, disables in mobile
li.list-item {
  position: relative;
}

.list-item-content__button-container {
  position: static;
}

@media (min-width: 768px) {
  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;
  }

  .user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
  }
}

@media (max-width: 767px) {
  .list-item-content__button-container {
    position: static !important;
  }

  .user-items-list-carousel__slide {
    pointer-events: none !important;
    user-select: none !important;
  }
}

Did you solve or still need help?

I need help making the images clickable in the "Films I've Produced" carousel section on this website while also hiding the buttons. johnr.squarespace.com

I appreciate your help!

Is it possible to make this full slide show banner clickable?

On 4/14/2023 at 7:54 PM, tuanphan said:

Did you solve or still need help?

@tuanphan Unfortunately no, would be fantastic if you could kindly share the Javascript code that enables click and drag for the carousel while having the click function working too. Currently, only click function works, click and drag does not, hence not as intuitive. Thanks so much!

On 4/14/2023 at 9:36 PM, maceydmiller said:

I need help making the images clickable in the "Films I've Produced" carousel section on this website while also hiding the buttons. johnr.squarespace.com

I appreciate your help!

Can you share link to this page?

On 4/16/2023 at 3:47 AM, pexeldio said:

Is it possible to make this full slide show banner clickable?

What is site url?

On 4/16/2023 at 4:59 PM, Dilon said:

@tuanphan Unfortunately no, would be fantastic if you could kindly share the Javascript code that enables click and drag for the carousel while having the click function working too. Currently, only click function works, click and drag does not, hence not as intuitive. Thanks so much!

Above CSS disabled that. You can remove that code + share link again, we will check & give new code

18 hours ago, tuanphan said:

Can you share link to this page?

What is site url?

Above CSS disabled that. You can remove that code + share link again, we will check & give new code

@tuanphan Sure, can you please provide your email? The website is live already. I am happy to provide you with administrator access. Thanks!

On 4/20/2023 at 10:13 AM, Dilon said:

@tuanphan Sure, can you please provide your email? The website is live already. I am happy to provide you with administrator access. Thanks!

Link to site only, no need to provide admin access

13 minutes ago, tuanphan said:

Link to site only, no need to provide admin access

@tuanphan 

www.mancheront.com/watches/pacer/black-black
www.mancheront.com/watches/pacer/black-steel
www.mancheront.com/watches/pacer/white-steel

Thanks a lot - really appreciate your help!

On 4/22/2023 at 9:08 AM, Dilon said:

@tuanphan 

www.mancheront.com/watches/pacer/black-black
www.mancheront.com/watches/pacer/black-steel
www.mancheront.com/watches/pacer/white-steel

Thanks a lot - really appreciate your help!

Add to Last Line in Code Injection > Footer

<script>

  $( ( ) => {
  
    const selector = '.user-items-list-simple .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>

1 hour ago, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>

  $( ( ) => {
  
    const selector = '.user-items-list-simple .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>

 

@tuanphan I tried to put that code in the footer code injection but unfortunately it didnt work. Still unable to click and drag the carousel.

FYI - This is what I currently have in CSS to make the button the size of the image and it is disabled for mobile.
 

/* Make carousel image clickable, disables in mobile (only works when button for carousel is enabled) */
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;
}

@media (max-width: 767px) {
  a.list-item-content__button.sqs-block-button-element {
    display: none;
  }
  .user-items-list-carousel__slide {
    pointer-events: none !important;
    user-select: none !important;
  }
}