A New Take on Lightboxes
We wanted to create a lightbox that performs a few things:
A Lightbox That Does Its Job: Show High Resolution ImagesWhat we disliked about lightboxes is that when you click on an image, you’re given a loading icon and you are forced to wait until the high resolution image loads before you can see anything. Torchbox gives you the low resolution copy of the image as a preview, while the high resolution one is being loaded. When it’s ready, the low resolution switches into the high resolution image seamlessly. What you have here is an uninterrupted image viewing experience.
Unique Lightbox DesignMost lightboxes are the same, click on an image, then a box opens with a loading icon. Torchbox changes things a bit. When you click an image, it pops out of its place then grows into the lightbox. And when you close the lightbox, the image then snaps back into place. It’s a simple effect, but very effective in blending into your site’s design.
Make the Image in the Lightbox the Star of the ShowWe feel that a minimalist design is more suitable for a lightbox. The lightbox isn’t the star of the show, your image is. We’ve designed our lightbox to display captions and navigation buttons in a non-obtrusive, yet stylish way.
Hardware AcceleratedWe wanted true hardware accelerated performance. We have carefully crafted our styles and animations so that we only use rules and transforms that use the least amount of browser repaints.
Full Feature Set
- Awesome minimalist design, the photo/image is the star, not the lightbox;
- Hardware accelerated animations for super smooth and blazing fast performance;
- High resolution with preview, when the lightbox opens, it shows your low resolution image. The high resolution version preloads and gets shown when ready;
- Fast & Responsive, other lightboxes show you only a loading icon and you’re forced to wait for it to finish, ours don’t. Switch between images fast with Torchbox. Low res images serve as a preview too;
- Gallery-like, if multiple Torchboxes are detected, you can switch back and forth between them within the lightbox;
- Easily styleable, you can easily change styles via CSS, examples are included;
- Settings & Methods exposed, we have provided options when initializing and methods so that you can be creative on how you use Torchbox;
- Minimal setup, include the script then initialize it;
- Works in all modern browsers (IE9 and below NOT supported)
Having Trouble with the Script?Head over to the support tab and check out the FAQs, or submit a support ticket!
Enjoying the Script?Be sure to leave a rating and review and show us some love.
Check out Our Other Stuff
Version 1.1 – August 12, 2015
* Keyboard navigation of lightbox is now possible through the cursor keys * When Torchbox opens, it now stops anchor links * Added overflow-x hidden to html to hide the horizontal scrollbar * Now doesn't show the caption overlay when the title is provided but blank * Lightbox is now disabled in mobile devices, the high res image opens instead, the small screen size defeats the purpose of a lightbox * Added options to modify the behavior in mobile devices * Updated preview to be responsive
* Initial release