Slideshow controls expanded and hidden

Hi all,

Thanks for all the help I've gleaned so far from previous answers. I haven't managed to find an answer to this question...

I'm trying to adjust the controls on my homepage slideshow. It's a simple page with full bleed background slideshow. I want the slideshow to advance to the next image when the user clicks anywhere on the picture except in the header.

I don't mind whether the slideshow advances only forwards regardless of where the image is clicked, or whether it moves forwards when clicked on the right side and backwards when clicked on the left - whichever is simpler works for me.

So far, I've made the controls transparent by adjusting the opacity. I then tried to expand the controls to each take up 50% of the width, but haven't managed to make this work. I don't know if this is the best way of achieving what I want.

Help much appreciated!

Many thanks, Dominic

highriselandscapes.org  /  password: nairobi

5 hours ago, jdomw said:

 

Hi all,

Thanks for all the help I've gleaned so far from previous answers. I haven't managed to find an answer to this question...

I'm trying to adjust the controls on my homepage slideshow. It's a simple page with full bleed background slideshow. I want the slideshow to advance to the next image when the user clicks anywhere on the picture except in the header.

I don't mind whether the slideshow advances only forwards regardless of where the image is clicked, or whether it moves forwards when clicked on the right side and backwards when clicked on the left - whichever is simpler works for me.

So far, I've made the controls transparent by adjusting the opacity. I then tried to expand the controls to each take up 50% of the width, but haven't managed to make this work. I don't know if this is the best way of achieving what I want.

Help much appreciated!

Many thanks, Dominic

highriselandscapes.org  /  password: nairobi

You can try adding to Home > Design > Custom Css

body.homepage .gallery-fullscreen-slideshow-control-btn {
  height: 100%;
  width: 100%;
}

.gallery-fullscreen-slideshow-control {
  width: 50%;
}

[data-next] .gallery-fullscreen-slideshow-control-btn-icon {
  display: flex;
  justify-content: flex-end;
}
.gallery-fullscreen-slideshow-control-btn::before {
  content: unset;
}
.gallery-fullscreen-slideshow-control-btn-icon svg {
  padding: 20px;
  background: var(--tweak-gallery-icon-background-color);;
}

Support me by pressing 👍  or marking as solution if this useful for you

My testing

My trick is using Css code to make the next/ previous button cover 50% on it side. So when you click on anywhere of this gallery, it means you are clicking on the next/previous image.

This solution makes buttons cover images. Therefore, clients can not click/right click on image to download or something like that

Thanks for the reply. That's definitely improved things, but hasn't quite got to where I'm hoping to end up. The clickable area (which seems to be 'gallery-fullscreen-slidshow-control-btn') is shown in blue in the Grenfell screenshot below. I'd like to expand this to the whole 50% of the page.

'gallery-fullscreen-slidshow-control' has expanded to the whole half of the screen (see second image).

I've tried to make 'gallery-fullscreen-slidshow-control-btn' expand to fill this space, but can't work out how to do it without everything else getting screwed up!

Ah yes. That was one of my attempts at working it out! 🤦‍♂️

Thanks so much. Work perfectly

hello!
i am looking exactly for this trick from @Beyondspace but it doesnt work with my gallery reel. even when i replace with the squarespace id finder.

could you help me with this please? especially for mobile use it would be very helpful.

here is a example site https://www.lonniwong.com/portfolio/inside-outs

Would be happy, if you could help me with that, thank you

7 hours ago, LonniWong said:

hello!
i am looking exactly for this trick from @Beyondspace but it doesnt work with my gallery reel. even when i replace with the squarespace id finder.

could you help me with this please? especially for mobile use it would be very helpful.

here is a example site https://www.lonniwong.com/portfolio/inside-outs

Would be happy, if you could help me with that, thank you

You can try

.gallery-reel-control {
  height: 100%;
  width: 50% !important;  
  overflow: hidden;
  position: relative;
  display: block;
}

.gallery-reel[data-controls-location="none"] .gallery-reel-controls {
  display: flex;
}
.gallery-reel-control-btn:after {
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

.gallery-reel-control-btn {
  position: absolute;
  display: block;
}

.gallery-reel-control-btn-icon {
  display: none;
}

.gallery-reel-control-btn::before {
  display: none;
}

1 hour ago, Beyondspace said:

You can try

.gallery-reel-control {
  height: 100%;
  width: 50% !important;  
  overflow: hidden;
  position: relative;
  display: block;
}

.gallery-reel[data-controls-location="none"] .gallery-reel-controls {
  display: flex;
}
.gallery-reel-control-btn:after {
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

.gallery-reel-control-btn {
  position: absolute;
  display: block;
}

.gallery-reel-control-btn-icon {
  display: none;
}

.gallery-reel-control-btn::before {
  display: none;
}

 

 @BeyondspaceThat is so amazing! that nailed it! thank you so much!!! 🙌