Layer9
Achievement unlocked: Lightbox
Achievement unlocked: Lightbox
   3 min read

One thing that I don’t like about Zdoc is all the space taken by the sidebars, leaving little space on the center for the articles and leaving the images quite small (especially when they are widescreen screenshots).
I don’t understand enough HTML to try to widen the central column (apart from the built-in arrow on top that widens the content column but hides the TOC), but I can try to make the images be shown larger when you click on them.


So I found this link and set up the Lightbox library.
I downloaded the latest release and placed:

  • lightbox.css em static/css/
  • lightbox.jsem static/js/
    Added at the end of this file:
1
2
3

// ========= lightbox
<link rel="stylesheet" href="/css/lightbox.css">
// ==================

Added before the </body> tag on this file:

1
2
3
4
5
6
7
8

<!-- lightbox-->
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" 
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
        crossorigin="anonymous">
    </script>
    <script src="/js/lightbox.js"></script>
    <link rel="stylesheet" href="/css/lightbox.css">
<!-- /lightbox -->

And created a lightbox shortcode, which accepts the same options as the figure shortcode it invokes:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

{{ if .Get "caption" }}
  {{ $.Scratch.Set "caption" (.Get "caption") }}
{{ else if .Get "alt" }}
  {{ $.Scratch.Set "caption" (.Get "alt") }}
{{ end }}
<!-- resolve absolute image path -->
{{ $permalink := $.Page.Permalink }}
{{ $image := .Get "src" }}
{{ $image_link_absolute := (findRE "^/" $image) }}
<figure
  {{ with .Get "class" }}class="{{.}}"{{ end }}
  {{ with .Get "width" }}style="width: {{ . }};"{{ end }}
  {{ with .Get "height" }}style="height: {{ . }};"{{ end }}
  >
    <a 
      {{ if .Get "lightbox" }}
        data-lightbox="{{ .Get "lightbox" | markdownify | plainify }}"
      {{ else }}
        data-lightbox="image-{{ $image }}"
      {{ end }}
      {{ if $image_link_absolute }}
        href="{{ $image | absURL }}"
      {{ else }}
        href="{{ (printf "%s%s" $permalink $image) }}"
      {{ end }}
    {{ with .Get "target" }} target="{{ . }}"{{ end }}
    {{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
  <img
      {{ if $image_link_absolute }}
        src="{{ $image | absURL }}"
      {{ else }}
        src="{{ (printf "%s%s" $permalink $image) }}"
      {{ end }}
        {{ if .Get "alt" }}alt="{{ .Get "alt" | markdownify | plainify }}"
        {{ else if .Get "caption" }}alt="{{ .Get "caption" | markdownify | plainify }}"
        {{ end }}
        {{ with .Get "align" }}align="{{ . }}"{{ end }}
         />
    </a>
  <!-- caption and attr-->
  {{ if ($.Scratch.Get "caption") }}
    <figcaption>
      <span class="img--caption">
        Figure {{ $.Page.Scratch.Get "fig" }}. {{ $.Scratch.Get "caption" | markdownify | plainify }}
        {{ if .Get "attr" }}
          [{{- with .Get "attrlink"}}<a href="{{ . }}">{{ end }}{{ .Get "attr" | markdownify }}{{ if .Get "attrlink"}}</a>{{ end -}}]
        {{ end }}
      </span>
    </figcaption>
  {{ end }}
</figure>
{{ .Page.Scratch.Add "fig" 1 }}
{{ $.Scratch.Delete "caption"}}

And that’s it, I got the lightbox effect going on!
Click on the image below to see it working:

What's on this Page