smoky

As a webdeveloper, you've certainly already made a website that contained a lightbox. The concept itself comes from Lokesh Dhakar, who created the original lightbox script many years ago (which is now written as a jQuery plugin).

Why?

• There are plenty of lightbox scripts out there, we both know that. But smoky is not an alternative to them. It's completely written in vanilly JS (ES 6) and the latest web technologies.

• Most of the scripts use JS to animate, smoky does not. It uses GPU-powered CSS animations (they're much faster and don't insert arkward number-chains into your code).

Sounds interesting?

Give it a spin and you'll be convinced fastly!

Important: As smoky is written on ES 6 (which will probaply only be fully released in the end of 2015), it's only possible to use it in conjunction with a ES-5-to-ES-6 compiler like Babel or Traceur. You can set up each of them pretty quickly, just take a look at their documentation!

1. After you've set up and compiled the source and implemented both the CSS and the JS parts of smoky, give it a try:

new Smoky( 'a.lightbox' );

2. Now every click on an element that matches the selector will be captured by smoky and trigger the opening of the lightbox containing the child image of the link element. If you want to make some additional configuration, just overwrite the existing one:

new Smoky( 'a.lightbox', {
  option: value
});

Options

Methods

If you've found any bugs or have some feedback for me, make sure to open an issue!