Skip to content
Jewel

Tags and photos

A photo wall people can narrow by tag and open one photo at a time. Tags filter the wall, badges carry each photo’s status, and the lightbox shows only what the filter left.

JS
filter.js, lightbox.js

01 — Example

Photo wall

Pick a tag to narrow the wall, then open a photo. The lightbox skips the photos the filter hid. Tag links such as #gradient drive the filter too.

Tagged: Gradient Study

02 — Built from

03 — Guidelines

Use it for

  • Tags that come from the photos themselves, so every tag shows something.
  • An All button first.
  • Badges only for status that matters: new, private, failed.

Avoid

  • More than one badge in a corner without a .badges group.
  • Filters that can show nothing. If they can, show an empty state.