Download SimpleLightbox — JS & CSS Files

Get the files

SimpleLightbox is distributed as a small package: a stylesheet and a script, each in a readable and a minified version. There is nothing to compile — copy two files into your project and start the lightbox with a selector.

Both files are self-contained. They do not pull fonts, icons or further scripts from anywhere else, so the lightbox behaves the same on an intranet, inside an offline documentation bundle or on a site with a strict content security policy.

The minified files used on this site can be downloaded directly:

File	Size	Contents
simple-lightbox.min.js	47 KB	Standalone build, no dependencies
simple-lightbox.min.css	4 KB	Default styles for the overlay, arrows and captions

Package managers

For a project with a build step, install the package and take the files from node_modules/simplelightbox/dist/:

// NPM
npm install simplelightbox

// YARN
yarn add simplelightbox

// Bower
bower install simplelightbox

Which build?

The dist folder contains several variants of the same library. Pick one script and one stylesheet:

File	Use it when
simple-lightbox(.min).js	You want the standalone version. It defines the global `SimpleLightbox` class and needs nothing else.
simple-lightbox.jquery(.min).js	jQuery is already on the page and you prefer `$('.gallery a').simpleLightbox()`.
simple-lightbox.esm.js	You import the plain ES module in a bundler such as Webpack, Browserify or Parcel.
simple-lightbox.legacy(.min).js	You still have to support Internet Explorer 11.
simple-lightbox(.min).css	Always — these are the default styles.
simple-lightbox.scss	You want to change colours and sizes through the SASS variables listed under Customization.

Include

Load the stylesheet in the <head> and the script at the end of the <body>, so the links already exist when the lightbox looks for them:

<link rel="stylesheet" href="simple-lightbox.min.css">

<div class="gallery">
    <a href="images/photo.jpg"><img src="images/thumbs/photo.jpg" alt="" title="My photo"></a>
</div>

<script src="simple-lightbox.min.js"></script>
<script>
    var lightbox = new SimpleLightbox('.gallery a');
</script>

The lightbox does not change the page until a link is clicked. Thumbnails stay ordinary links, and without JavaScript each one simply opens the image file in the browser. That makes it safe to add SimpleLightbox to an existing site one gallery at a time and to remove it again without touching the markup.

The smallest possible setup is one link around one image — the arrows and the counter disappear automatically when there is nothing to navigate to:

Requirements

Any current browser — Chrome, Firefox, Safari, Edge and their mobile versions.
Internet Explorer 11 only with the legacy build.
No jQuery. If it is on the page anyway, the jQuery build can be used instead.

SimpleLightbox is open-source software released under the MIT License. You can use it in personal and commercial projects, change it and redistribute it, as long as the license notice stays with the code.

Package managers install the newest published release. To stay on a known version, pin it in your package.json, and look at the changelog at the end of the documentation before upgrading — it lists what every release fixed or added, so you can decide whether replacing the two files is worth it right now.