Jump to content

Change Gallery Controls: Arrow on hover

Recommended Posts

I have a Simple Gallery in my 7.1 website (https://www.michaelvincekim.com/aenikkaeng) but I'd like to change the gallery controls so you can click through the images anywhere on the screen, like in the 7.0 Wells template, as well as being able to use the left/right keyboard keys to move through next/previous images.

Also, is there a way to add an image counter (i.e. 1/25, 2/25, etc), as in the Wells template?

I'd appreciate any help with these. Thank you!

Edited by Jakhodo
Link to comment
  • Jakhodo changed the title to Change Gallery Controls: Arrow on hover

You mean click on half of image (left) = click left arrow

similar with right arrow?

You can use this code to Website > Website Tools > Custom CSS
 

@media screen and (min-width: 992px) {
.gallery-slideshow[data-controls-location="side"] .gallery-slideshow-control {
    width: 50%;
}

button.gallery-slideshow-control-btn {
    width: 100%;
    height: 100%;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)

Hi @tuanphan, thanks for this! It's almost there but I'm having a couple of problems with the code:

  1. It looks like I can only click on each half of the gallery "container" (not sure if this is the correct term, please see the screenshot where the blue area is highlighted). Would it be possible to extend the clickable areas to the entire page, including outside the blue area, except the header?
  2.  Is there a way to replace the cursor with a left-right arrow when hovering on these areas, like in this website? (also see arrows circled in red in screenshots): https://www.c-reel.com
  3. The "next" navigation arrow ends up in the middle of the image. I'm going to remove them if I can manage to get the code above to work, but I thought I'd mention it in case it wasn't intended.

Screenshot 2024-03-05 at 17.29.51.png

IMG_4252.jpg

Edited by Jakhodo
Link to comment
Posted (edited)

I ended up solving one of the problems by switching the simple gallery to the fullscreen gallery and using another similar code I found in the forum that does essentially the same thing.

But if you have any advice about adding an image counter (i.e. 1/25, 2/25, etc) I'd appreciate it!

Edited by Jakhodo
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.