Torchbox Lightbox for Images

Torchbox Lightbox for Images

Torchbox Lightbox for Images - 1

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 Images

What 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 Design

Most 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 Show

We 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.

High Performance

Speed and loading time is very important to us, so we’ve made Torchbox in pure vanilla Javascript. You don’t need jQuery for this. What this means is that you’ll save load times since you won’t need to load the jQuery library, and computations are fast since the processes are slimmer.

Hardware Accelerated

We 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;
  • Pure Javascript solution, no jQuery required, so it loads fast;
  • 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

Torchbox Lightbox for Images - 2

Torchbox Lightbox for Images - 3

Torchbox Lightbox for Images - 4

Torchbox Lightbox for Images - 5

Torchbox Lightbox for Images - 6

Video & Parallax Backgrounds For Visual Composer

CSS Animator add-on for Visual Composer

4k Icons add-on for Visual Composer


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

Version 1.0

* Initial release