ahmednooor / halkabox.js Goto Github PK

I found that chromium browser (66) marks box-shadow:0; and -webkit-box-shadow:0; as "invalid property value".

used here:
https://github.com/ahmednooor/halkaBox.js/search?utf8=%E2%9C%93&q=box-shadow&type=

Maybe it would be better to use none instead of 0. (?)

Hi,

Thanks for the work on this.

One thing I noticed is that the wheelhandler for desktop is super sensitive. Is there any way to disable the wheelhandler, or at least slow it down on desktop via the config?

https://github.com/ahmednooor/halkaBox.js/blob/master/src/halkaBox.js#L570

A suggestion to perhaps have some sort of gesture based closure of the overlay on touch based devices?
A two finger Pinch to close or swipe up or both ?

Hi
Can you configure the plugin to get captions from html5 data attribute.
Like data-title. Getting caption from native title attribute interferes with designs especially when we don't want the title to show on mouse hover.
thanks

A common pattern beyond pinch zoom in/out is often doubletap to zoom in/out like on FB or IG. Could you forsee a function for such a feature?

Is there way to show case a collection of gallery with one picture representing each gallery unlike in the demos where all pictures of the gallery are visible before the gallery is opened?

It will be better if there is a method that will destroy the current instance, use case example is when user change the theme between night and dark it should be re instantiate

Hello.
I have another minor issue..

These rgba values seem to work only when loading the halkaBox with small browser window.

When I view a photo with large browser window, and drag the window smaller, the buttons become light grey. When I then reload the page and open the photo again, the buttons are dark again.

I thought, maybe because of the surrounding if, but I'm not sure, because the colors are okay, and only become light-grey when I resize the browser window (drag it smaller).

wrong

I want to integrate this in my project but we load the images dynamically on the go... If there is some way to pass a callback that fires when slides are changed, it will be very useful for us!

Hello, is there some way how to show white background under the transparent PNG img element with let say 20px padding?

I've tried ::before class on img, but it's not working. Then I've tried set background color on hb-image-div, but this div is 100% width.

Thanks

Your demo with PNG:

When trying the demo page it works fine on mobile until you switch between views. You have to refresh the page in order to being able to swipe again. This also happens when resizing the screen in responsive mode using your regular browser.

It's possible to append the alt attribute after image? Like a legend of the image itself.

It will be ideally if there is something to display the list of images.

Hi,
I suggest adding exports to use this as a module in webpack, this could be really really useful
Thanks in advance,
Fabio

autoplay option it's possible?

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

Looking at the demos and the documentation it seems it is not possible the define the items/elements as a JSON array from JavaScript in in many other gallery plugins like FancyBox and GLightbox to mention a few.

An example from GLightbox:
https://github.com/biati-digital/glightbox#lightbox-options

This is useful when you want to open a gallery from e.g. a button or a single image which should open a full gallery.

This is a very nice, well implemented lightbox. Kudos!
The only thing stopping me from using this is the disappearing/appearing scrollbar when you open the lightbox. Is this intentional? Could it maybe be optional?