Prewv and Next buttons of Image Gallery not showing

[Boswell (Bruce Hemming)]

I’ve started this new thread as this is now a specific problem. My site - https://www.bhphoto.biz does not display the Previous and Next buttons when viewed on iPhones and iPads (don’t know about Android etc as I can’t test that). However when the site is viewed in the simulator on RW or the published site in the Develop menu of Safari the buttons are there. The function of the buttons works - if you know where to tap the screens but they don’t show.

I’ve contacted Joe Workman support but not heard back yet and I wanted to confirm that this problem is not restricted to me and my devices and to see if anyone has any suggestions for correcting this problem.

Site is built using the Walter theme from Archetypon and with the Image Gallery stacks from Joe Workman. Column stacks etc are RW (I think).

Thank you.

[Pyrobrit (Nick Woodruffe)]

The preview and next buttons only seem to appear when i move the mouse across the image and then only if the mouse is more to the left of centre then you get “preview” and if it is more to the right of centre, you get “next”.

This is on your interiors page.

As tablets don’t have mice, the photo plugin you are using is unable to query mouse position so these buttons do not appear.

From a personal point of view it’s a little bit annoying to have them fly in when the mouse is moved. Have you tried setting them to be displayed all the time if that is an option?

Regardless of if the buttons appear, tapping the left or right of the image will move to the next picture as requested.

[Boswell (Bruce Hemming)]

Thank you Nick, unfortunately there is no option in the Image Gallery stack to control display of the buttons (not that I have found anyway) - but I take your point re tablets and mice…

I fear that the only answer might well be change the Image Gallery stack for a Slide Show one where the Previous and Next arrows are embedded within the image. That of course means a complete redesign and a lot of work unfortunately.

Regards

[Pyrobrit (Nick Woodruffe)]

I think the best thing is awaits Joes reply. The image gallery stack on his weaver.space website shows the preview and next buttons permanently there so I suspect there is a way to do it.

[teefers (Doug Bennett)]

I don’t have Image Gallery, and I can’t find anything on the site (https://www.weavers.space/stacks/image-gallery) that show’s the settings. Let’s tag @joeworkman so he might reply here.

[Boswell (Bruce Hemming)]

Thank you for checking the display on the weaver.space website Nick. I have an awful feeling that this might be some kind of conflict between the Image Gallery stack and the Archetypon theme - which would be my worst nightmare. Hopefully I will hear from Joe before too long.

[joeworkman]

Prev and Next buttons were configured to show on hover and since hover is not possible on touch, they never display. However, if you tap the left/right of the image, it will navigate to the correct direction.

I will file a bug and get an update out when I can. Until then, this CSS will make them always visible.

.lightbox-nav-btnPrev{ background-position: left 15%!important }
.lightbox-nav-btnNext{ background-position: right 15%!important }

[Boswell (Bruce Hemming)]

Thank you very much, this is very helpful. I have one further question is the CSS added to the existing code or does it replace part of that? I can see in the first line of the CSS - #lightbox-nav-btnPrev,#lightbox-nav-btnNext{height:100%!important}#jquery-overlay{width:100%!

Do I replace this with the code in your email or just add it and if so which line do I add it to?

Many thanks

@joeworkman

[Pyrobrit (Nick Woodruffe)]

I may be wrong but I was led to believe you added it to the CSS tab belonging to the page you wanted to adjust in RW.

or perhaps it goes in the more global position under the CSS tab in the CODE (settings) window on the left column. Most likely here.

[Boswell (Bruce Hemming)]

Thanks Nick, not so sure about that. As there is code relevant to the nav button positions in the existing code wouldn’t that cause a conflict if the extra was just added. I’m at just about my limit of competence when faced with writing code so am very wary.

[Pyrobrit (Nick Woodruffe)]

Probably best for joeworkman to answer. If you already have CSS code in those places then he can tell you what to replace. If you don’t have CSS code in those two places then certainly no harming in a test.

[Boswell (Bruce Hemming)]

Just tried that Nick and it doesn’t work.

[joeworkman]

Sorry. I have a small mistype in my CSS…

#lightbox-nav-btnPrev{ background-position: left 15%!important }
#lightbox-nav-btnNext{ background-position: right 15%!important }

[Boswell (Bruce Hemming)]

Thank you, I tried pasting that code into the CSS tab in the HTML Code section but it does not appear to work. Is that the correct place to put it? If not should it be put into the css file in the files folder for each page using Image Gallery?

@joeworkman

Thank you

[joeworkman]

this needs to go into the CSS tab.

[Boswell (Bruce Hemming)]

@joeworkman

Thank you, I’ve put the code into the CSS tab but no success unfortunately.

[joeworkman]

That CSS was part of the fix, here is the rest. That should do it for you.

#lightbox-nav-btnPrev{ 
   background-position: left 15%!important ;
   background-image: url("https://www.bhphoto.biz/rw_common/plugins/stacks/image-gallery-images/lightbox-btn-prev.gif")!important;
}
#lightbox-nav-btnNext{ 
   background-position: right 15%!important;
   background-image: url("https://www.bhphoto.biz/rw_common/plugins/stacks/image-gallery-images/lightbox-btn-next.gif")!important;
}

[Boswell (Bruce Hemming)]

Thanks for trying but unfortunately this does not work either.

@joeworkman