Lightbox.css

LightBox made in pure CSS.

Project maintained by DizzyZane Hosted on GitHub Pages — Theme by mattgraham

LightBox CSS

This is a CSS only implementation of a LightBox. It works near perfectly on many devices, including mobile phones, low end laptops, modern video game consoles and home PCs. Animation not available if not supported by the users browser (IE).

Table of Contents

Creating a LightBox

Quite simply add lightbox="lightbox" (or just lightbox) to the div or other element you wish to make a LightBox. That's all you require to make a LightBox. Unless you go with the label+input version, where you'll need an input (<input type="radio" name="lightbox" id="lightbox-1">) followed by the normal lightbox. (<input type="radio" name="lightbox" id="lightbox_lbl"><lightbox lightbox></lightbox>)

<input type="radio" name="lightbox" id="lightbox_lbl">
<lightbox lightbox>
 <label for="remove_lightbox"></label>
 <!-- Content -->
</lightbox>

<lightbox lightbox id="lightbox_target">
 <a href="screenarea"></a>
</lightbox>

To open:

<label for="lightbox_lbl">Open lightbox_lbl</label>
<a href="#lightbox_target">Open lightbox_target</a>

Make sure you add an element that doesn't need to be seen with an ID of screenarea like so: <div id=screenarea ></div> or <div id="screenarea"></div>. This is not seen and should only be used once per page, preferably at the start or end of the document. Completely unneccesary, but still somewhat useful. If you're using the label, put a <input type="radio" name="lightbox" id="remove_lightbox"> at the top of your document.

Defining Properties

Adding extra properties to the LightBox is quite easy. Just add a set of items to the input of the lightbox. Not required thanks to defaults (all defaults are shown), but very useful for controlling the UX.

Directional

Effects which direction the LightBox enters from.

Selectable

Specifies whether the user is able to select it or not.

Speed

Specifies the speed at which the LightBox appears on screen. Always inst if there's no support for transition (CSS).

Starting time (amount of wind-up)

Can also be specified by radio inputs with ids of lightfast, lightnorm, lightslow, lightinst. Not required and completely optional.

Putting things in the LightBox

These are the things you put inside the LightBox. These are heavily recommended and, although not required for it to work, will greatly increase the experience the user recieves.

Close

This is of utmost importance. If this is not included then it will fail to perform its function properly. Define using <a href="#screenarea"/>. It'll automatically add close. You can style it using the below:

Styles of Closing banner:

I do plan on adding more soon, such as colours, capitalisation and :hover options (lb_closeh). If you couldn't guess, this uses the ::before and ::after pseudo elements for its main part.

Content

The utmost important piece. Without this it's literally useless.

Directly supported elements:

Elements supported by wrapping in article:

Title

Tools for creating a gallery in the box. Note that these do require you to create your own links to other parts of the gallery.

What happens when I don't put things in the right order?

Don't worry! I have fallbacks!

The order:

<lightbox id="lightbox" lightbox>
 <a href="screenarea"></a>
 <article>Content goes here in places of article</article>
 <h1>This is the title</h1>
 <!-- Links to other places are here -->
</div>

One like this

Now, One that missed the memo

Something's different about this lightbox.

As you can see, it's not exactly the end of the world with it.

Adding content