1337box, an insanely optimized CSS-only, no-JS lightbox implementation


Leah Rowe

Return to index

Article published by: Leah Rowe

Date of publication: 19 December 2021 (updated on 24 December 2021)

Introduction

1337box is a simple, insanely optimized Lightbox replacement in pure CSS.
Demos are available

With 1337box, you can click an image on a page and a full sized zoomed in version of it appears, filling the width/height of your browser window.

Download

You can download it from a Git repository:

git clone https://notabug.org/1337box/1337box

Direct links to the latest file, each with varying levels of optimization:

Features

It makes image galleries more user-friendly, on otherwise static HTML pages, and works fully, even if the user has JavaScript disabled in their browser!

Benefits over other Lightbox implementations include:

Configuration

How to understand CSS rules: .f is the full image, and .t is the thumbnail.

For versions with the shadow effect, establish images like so:

<img tabindex=1 src="image_thumbnail.png" /><span class="f"><img src="image_full.png" /></span>

For versions without the shadow effect, establish images like so:

<img tabindex=1 src="image_thumbnail.png" /><img class="f" src="image_full.png" />

How does each version differ?

The default version scales images to a max width and height filling the browser window. These versions are mobile-friendly (on all versions, it is recommended to view full images in widescreen mode, if you’re viewing it on a smartphone).

The nocursor version removes the cursor icon that appears (on desktop browsers) when hovering over images.

The shadow version adds a shadow effect, darkening what’s behind the image. Depending on your site, you may want to use this version (it looks very similar to normal lightbox).

Versions with nocenter do not center the image.

The cursed versions set the full image statically to fill the height of the browser window, and sets the max width to the width of the browser window. It is recommended that you don’t use wide images with this one, and view in widescreen mode if using a mobile device. These versions are highly optimized, but less technically correct versus the original lightbox behaviour.

The supercursed versions are like the cursed versions, but they do not set a maximum width. Otherwise, the same rules apply.

The only versions that have the cursor icon appear over images (when hovering), on desktop browsers, are 1337box_default.css version and 1337box_shadow.css. If you like this behaviour, and want to add it on other versions, simply add this line in CSS:

img{cursor:pointer}

Known problems and workarounds

If you have elements extending beyond the width of the browser screen, such that horizontal scrolling is enabled, 1337box will break horribly, because it will scale to that extended size.

Please ensure that your pages don’t horizontally scroll.

If using the cursed versions, please ensure that the aspect ratio of your full sized images do not exceed the aspect ratio of the browser window.

Send patches

Send a pull request: https://notabug.org/1337box/1337box/pulls

You can also send the patch via email. My info is on the contact page of vimuser.org.

Untitled Static Site Generator

You may also consider building websites using the untitled static site generator. With this, you can write pages in Markdown but it uses Pandoc to generate HTML, and you can still insert HTML into pandoc-style Markdown files.

Untitled and 1337box are both written with a simple goal: to make the web sane.

Copying

1337box is released under the terms of the Creative Commons Zero 1.0 license. You can view that license text here:

https://creativecommons.org/publicdomain/zero/1.0/legalcode

A copy of that file has been included, alongside 1337box inside the Git repository, in the COPYING file.

That license ALSO applies to this page/document that you are reading now! This text is released under the terms of the Creative Commons Zero 1.0 license.

As such, you can freely use 1337box for any purpose you desire. It is completely free, in every sense of the word.

Markdown file for this page: https://vimuser.org/1337box.md

This HTML page was generated by the untitled static site generator.