cursor-issue zoom

[sun4all]

Hi!

Not a big issue, because many people will not notice, so you might change this or not. Priority: low.

On a Windows 10 pc, Firefox 67.0 and MS Edge whatever, I stumbled upon an issue with the lightbox, that was weird. Zooming with Ctrl-key and the mouse wheel, afterwards moving the mouse over the zoomed image, the ZOOM-cursor changed to the HAND-cursor, while hovering over (mouseover) the hidden control buttons.

I checked with the demo-site, to see if this was only my thing, because I had changed some of the code in the lightbox-js, but same there.

JS/CSS (original is made with CSS opacity:0 - opacity:"") I tried with display:"none", and display:"", worked for "grouped images" to solve the cursor-issue, but not for a standalone single image with the CSS-class "hb-single", showing me ALL the control-buttons now???

Finally I tried the CSS-property "visibility" instead of "opacity", that worked for me. CSS property "visibility": .mydiv{visibility:visible} or .mydiv{visibility:hidden}

I changed the CSS properties in the javascript, in the hideControls(), showControls() functions
They used to be: whatever.style.opacity=0; or whatever.style.opacity="";

function hideControls(){
hbRightIconContainer.style.visibility="hidden"; ... for right, left, close, and counter
controlsHidden=true;
}

function showControls(){
hbRightIconContainer.style.visibility=""; ... for right, left, close and counter
controlsHidden=false;
}

Note: Opacity 0 does NOT (always or automatically) disable all properties connected with it, that's tricky. A mix of CSS "display,opacity,visibility", or only one of those 3, might do the trick.
Anyway, thank you! for the great halkaBox-script, totally underrated in my opinion, should have minimum 500++ likes here on github.

sun4all

[ahmednooor]

Hello and Thank you.

I understand what you are saying about opacity and the element being there even if it isn't visible. The reason for using opacity might have been for having a transition effect when hiding and showing because display property doesn't support transition. I agree this as a low priority issue because even if you click on the hidden button's area in zoomed mode, it does not work, so the purpose of hiding the controls to show controls being disabled gets fulfilled.

Although I will surely look into it more soon and hopefully fix the hover issue. Thanks for bringing my attention to this.