Menu icon Foundation
I want to improve clearing (lightbox)

I am going to use it on picture based site so I want some improvements.
Biggest flaws I see on current version is that lots of screen real estate is wasted on thumbs row and active thumb does not stand out enough (inactive thumbs are currently faded out, which is great but too subtle IMO, you can't just glance to see where you are at).

Here are things I want to change:
1) Make active thumb bigger than others (make it's height be 120%-150% bigger than others)
2) Add go fullscreen button
3) Make thumbs row hidden until you hover over bottom edge on desktops and somehow collapsable on touch enabled devices. I don't use my smartphone for surfing that much so I don't know what would be best practice for this.

All of this should enable to view image over full screen with no wasted real estate.

I don't mind sharing my work once I am done.

I have just spent 15-30 minutes looking at scss and js files and I haven't figured out what class to use to style active thumb (item 1 on my wishlist). Which class is that?

I thought I'd get a hint by loooking at variable $clearing-carousel-thumb-active-border, but that is never used in scss or js file.

Most importanly, what are plans for this component, will it be developed/maintained more or will it be abandoned in next foundation versions?

clearinglightbox

I am going to use it on picture based site so I want some improvements.
Biggest flaws I see on current version is that lots of screen real estate is wasted on thumbs row and active thumb does not stand out enough (inactive thumbs are currently faded out, which is great but too subtle IMO, you can't just glance to see where you are at).

Here are things I want to change:
1) Make active thumb bigger than others (make it's height be 120%-150% bigger than others)
2) Add go fullscreen button
3) Make thumbs row hidden until you hover over bottom edge on desktops and somehow collapsable on touch enabled devices. I don't use my smartphone for surfing that much so I don't know what would be best practice for this.

All of this should enable to view image over full screen with no wasted real estate.

I don't mind sharing my work once I am done.

I have just spent 15-30 minutes looking at scss and js files and I haven't figured out what class to use to style active thumb (item 1 on my wishlist). Which class is that?

I thought I'd get a hint by loooking at variable $clearing-carousel-thumb-active-border, but that is never used in scss or js file.

Most importanly, what are plans for this component, will it be developed/maintained more or will it be abandoned in next foundation versions?

Brandon Arnold almost 4 years ago

Hey Marko,
Thanks for showing interest in Clearing! Clearing is meant to be pretty bare bones as far as a lightbox gallery is concerned and some of these things seem like awesome features.

We are removing Clearing from the core of Foundation because in our own experience and the experience of many people we spoke to it just wasn't used on enough projects to justify having it at the core. We will be offering it as an add on component to Foundation shortly after Foundation 6 launches and will be recoding it. We'll be hoping to trim the size and perfect some of the interactions.

For any of the Foundation components the best place to help pitch in is on Github in the form of both issues and (better yet) PRs. If you have ideas or see bugs that you can improve PRs are an awesome way to contribute to that,

Hope this helps

-Brandon (Foundation Lead)