Lightbox -- A pure CSS lightbox for Pelican

Credit: Kimberly Coles

Contents

• Introduction
• Installation
• Usage
• Optional arguments
  • Alt
  • Caption
  • Align
• CSS attributes
• Basic CSS for Lightbox
• Source code
• License

Introduction

With the release of my Eevee theme for Pelican, I realised displaying a thumbnail image of the theme that linked to a larger image wasn't the most appealing design choice. I prefer to leave Javascript out of the equation where possible, being one of those weird people that have it disabled by default.

As such I sought out a way to create a pure CSS equivalent of a Lightbox and turn it in to an RST directive to plug directly in to Pelican.

Installation

$ wget https://github.com/kura/lightbox/archive/master.tar.gz -O lightbox.tar.gz
$ tar xvzf lightbox.tar.gz
$ mv lightbox-master /your/pelican/plugins/folder/lightbox

Make sure to rename the lightbox-master directory to lightbox.

If you do not have a plugins directory in your Pelican blog, in the root directory of your blog, the directory your content directory is in.

Create one.

$ mkdir plugins

And in your pelicanconf.py set the PLUGIN_PATHS variable.

PLUGIN_PATHS = ['plugins/', ]

Then add lightbox to your pelicanconf.py PLUGINS.

PLUGINS = [
    # ...
    'lightbox',
    # ...
]

Usage

In your article or page, you simply need add a directive.

.. lightbox::
    :thumbnail: /images/eevee-thumbnail.png
    :large: /images/eevee-large.png

Will result in the following HTML.

<div class="align-left">
    <a href="#005da263-b70e-4a84-b8c3-e2c989527613" title="Click to view large image">
        <img src="/images/eevee-article-header-thumb.png" class="align-left" alt="Click to view large image" />
    </a>
    <a class="lightbox" href="#_" id="005da263-b70e-4a84-b8c3-e2c989527613" title="Click to close">
        <img src="/images/eevee-article-header.png" alt="Click to close" />
    </a>
</div>
<div class="lightbox-divider"></div>

Optional arguments

Lightbox also supports the following optional arguments.

• alt
• caption
• align

Alt

This optional argument defines alt= attribute for an image that is also used the title= attribute for anchors.

:alt: Eevee, the Pokémon

Caption

This optional argument defines caption text for an image, it is displayed under the thumbnail inside a paragraph <p></p> element.

:caption: Eevee, the Pokémon

Align

This optional argument defines the alignment of the thumbnail image and caption.

:align: center

Valid values for this option are;

• center
• left
• right

Alignment is added as a CSS class attribute, for example;

<img class="align-center" />
<img class="align-left" />
<img class="align-right" />

CSS attributes

Each set of lightbox thumbnail, large image and caption are wrapped in a <div> element with the class attribute lightbox-block and a class attribute based on the alignment i.e. align-left.

For example;

<div class="lightbox-block align-left"> ... </div>

The thumbnail image will have an alignment class attribute too.

<img class="align-left" />

The large image and the anchor that closes it have the class attribute lightbox which initially sets their display as hidden.

<a href="#_" class="lightbox" title="Click to close">
    <img class="lightbox" alt="Click to close" />
</a>

Finally, the parent div element is closed and a final div element with the class attribute lightbox-divider is provided, allowing you to create a defined separation between images.

<div class="lightbox-divider"></div>

Putting all elements together, this is how the final HTML will be returned.

<div class="lightbox-block align-center">
    <a href="#e17813e9-ba4c-4037-be9a-3b0bb81fa0e5" title="Homepage (click to view large image)">
        <img alt="Homepage (click to view large image)" class="align-center" src="/images/eevee-homepage-thumb.png" />
    </a>
    <a class="lightbox" href="#_" id="e17813e9-ba4c-4037-be9a-3b0bb81fa0e5" title="Click to close">
        <img alt="Click to close" src="/images/eevee-homepage.png" />
    </a>
    <p class="align-center">Homepage (click to view large image)</p>
</div>
<div class="lightbox-divider"></div>

Basic CSS for Lightbox

.lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
}

.lightbox img {
    max-width: 98%;
    max-height: 90%;
    margin-top: 2%;
}

.lightbox:target {
    outline: none;
    display: block;
}

.lightbox-divider {
    background: #E0E0E0;
    width: 100%;
    height: 3px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 30px 0;
}

You can get a copy of this basic CSS file from GitHub.

Source code

The source code of Lightbox is hosted on GitHub.

License

Lightbox is released under the MIT license.