![Lightbox](https://raw.githubusercontent.com/kura/lightbox/master/lightbox.png)
Credit: Kimberly Coles
Contents
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.
$ 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',
# ...
]
In your article or page, you simply need add a directive.
.. lightbox::
:thumb: /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-thumbnail.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-large.png" alt="Click to close" />
</a>
</div>
<div class="lightbox-divider"></div>
Lightbox also supports the following optional arguments.
This optional argument defines alt=
attribute for an image that is also
used the title=
attribute for anchors.
:alt: Eevee, the Pokémon
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
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" />
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>
.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.
The source code of Lightbox is hosted on GitHub.
Lightbox is released under the MIT license.