Jump to content

Slideshow controls expanded and hidden

Go to solution Solved by Beyondspace,

Recommended Posts

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

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.d68a538ee2e3f6049d60aa0693f36981.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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!

Screenshot 2022-11-25 at 18.32.23.png

Screenshot 2022-11-25 at 18.32.37.png

Link to comment
  • Solution

It seems that there is a css code that is set below my code so it overwrites mine.

image.thumb.png.1bf6e681fc613497526e629dce224415.png

Can you remove it? Or you can set like this

body.homepage .gallery-fullscreen-slideshow-control-btn {
  height: 100%;
  width: 100% !important; /*set the highest priority*/
}

.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);
}

Hope it works fine

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...
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;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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!!! 🙌

 

Link to comment

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.