Skip to content

A tiny, responsive, and accessible lightbox in vanilla javascript.

Notifications You must be signed in to change notification settings

goodmorningcmdr/slightbox

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#Slightbox

##A tiny, responsive, and accessible image lightbox in vanilla javascript.

What the world needs is another lightbox, right? Well, maybe. I couldn't find another image lightbox that satisfied all of these requirements:

  • Didn't use jQuery
  • Small in filesize
  • Prioritized accessibility
  • Mobile friendly

So I made Slightbox to do all of those things. Preview a demo of slightbox [note: this preview isn't working completely well on mobile devices].

###No jQuery

Advances in browsers are making it easier to ditch jQuery. Or maybe you're just a code hipster like me and think vanilla JavaScript sounds better.

###Small

It requires some JavaScript and some CSS to work, but both files together are only around 8kb (minified). Of course, it requires no jQuery or any other library. There are some helpful look and feel styles baked in, but as little as possible was added so that you can style it yourself. No images in the UI or any of that silliness.

###Prioritize Accessibility

It probably isn't perfect yet, but it tries to do some things. It is fully operable with a keyboard, and it takes care to manage focus well. It also is semantically marked up, using figure and figcaption elements as well as buttons for controls.

###Mobile Friendly

Not only is it touch- and swipe-friendly, it is designed to work in a responsive layout.

##Notes

Read the how to on the wiki.

Currently, it doesn't look like it's the smartest way to handle the images. All full-sized images are being loaded with the rest of the page, then just made larger in the lightbox. I plan to extend this to support thumbnails and even just links to images.

The reason I've done it this particular way is because I built this for my personal site, and I'm loading the images at the user's request. Check out my implementation of it on my personal site.

Currently hasn't been tested very many browsers, but it probably doesn't work in IE8 and below. Also only supports images, not videos or other media yet.

About

A tiny, responsive, and accessible lightbox in vanilla javascript.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 60.5%
  • HTML 22.5%
  • CSS 17.0%