Portfolio sites, blog posts, and even social sites all use lightboxes. They’re handy for showing off larger content without taking up more space on the page.
But there’s no reason to build your own from scratch when there are so many free scripts online. One of my new faves is SimpleLightbox, designed to be 100% open source and mobile responsive running on all devices.
All image thumbnails and lightbox navigation links support touch behaviors so users can browse through content from any smartphone or tablet.
This library is massive and it’s by far one of the best lightbox galleries you’ll find. It uses a real lightbox design which adds a small overlay on top of the pagewhen viewing any gallery.
Each thumbnail image appears in full view along with arrows for navigating through the whole slideshow. But you can include extra features using the SimpleLightbox API. There’s a full table of features in the documentation and these are some of my favorites:
- Navigation text.
- Image captions.
- Image ratio sizes.
- Swipe-to-close feature.
- Custom animation styles.
- Optional loading spinners.
Plus this library lets you run callback functions whenever the user clicks to open a gallery, swipes to a new image, or performs any other common action.
These methods are all documented on the main site including live examples in the GitHub source code. You can pull a copy using Bower or Yarn as a package management tool, although GitHub may be an easier method if you aren’t familiar with the command line.