ahmednooor / halkabox.js Goto Github PK
View Code? Open in Web Editor NEWA simple and basic Javascript lightbox.
Home Page: https://ahmednooor.github.io/halkaBox.js/
License: MIT License
A simple and basic Javascript lightbox.
Home Page: https://ahmednooor.github.io/halkaBox.js/
License: MIT License
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.
autoplay option it's possible?
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's possible to append the alt attribute after image? Like a legend of the image itself.
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 ?
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?
It will be ideally if there is something to display the list of images.
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
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
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
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.
Hello.
I have another minor issue..
Line 149 in 9c1ac31
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).
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
. (?)
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!
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?
Hi,
I suggest adding exports to use this as a module in webpack, this could be really really useful
Thanks in advance,
Fabio
wrong
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.