Biscuit Crumbs

While creating pages to showcase my work, I found the need for an image gallery. Since I had been away from web development for a long while, I set myself a challenge of creating a simple JavaScript solution (no jQuery!) which suited the Scribble theme.

The resulting gallery JavaScript plugin can be found here.

There really isn’t anything special in the script. But it does excel in it’s simplicity.

Since it’s primary use is within the Jekyll environment, this means Markdown. To create an image gallery, we simply create an unordered list of images wrapped in a div.

<div class="gallery" markdown="1">
- ![image description](/path/to/image)
- ![image description](/path/to/image)
- ![image description](/path/to/image)
</div>

The resulting markup is thus

<div class="gallery" data-current="1">
  <ul>
    <li><img src="/path/to/image" alt="image description"></li>
    <li><img src="/path/to/image" alt="image description"></li>
    <li><img src="/path/to/image" alt="image description"></li>
  </ul>
  <div class="gallery-nav-status">
    <span class="gallery-current-image">1</span>/5
  </div>
  <div class="gallery-nav">
    <a class="gallery-nav-left" href="#">&lt;</a>&nbsp;
    <a class="gallery-nav-right" href="#">&gt;</a>
  </div>
  <span class="gallery-title">&nbsp;</span>
</div>

All navigation and gallery titles are dynamically created and inserted into the DOM. Particular care was taken to use JavaScript techniques which were efficient; performance would then scale well for large image sets.

Multiple galleries can appear on any single page; all navigation elements are created independently to each gallery. Each gallery can also have a title or short description. More options, such as transition effects, will be added in the future.

To enable the gallery, add the following to the YAML front matter for any page or post. This creates galleries with no titles.

gallery: y

If a gallery requires a title, use an array of key-value pairs, with title as the key.

gallery:
  - title: "Title for gallery 1"
  - title: "Title for gallery 2"

If only some galleries on the page have titles, you must also give the rest blank titles. Here, only galleries 1,3, and 4 have titles, whereas galleries 2 and 5 do not.

gallery:
  - title: "Title for gallery 1"
  - title: ""
  - title: "Title for gallery 3"
  - title: "Title for gallery 4"
  - title: ""

Most dynamically created elements have a class name attached to them. The styling used for Scribble theme is as follows

.gallery {
  font-family: monospace;
  text-align: center;
}

.gallery ul {
  list-style: none;
  padding: 0;
}

.gallery .gallery-nav-status {
  float: left;
}

.gallery .gallery-nav {
  float: right;
}

.gallery .gallery-title {
  display: inline-block;
  width: 70%;
}

Pretty simple! You can of course spice it up and use images for the navigation buttons, for example.

In addition to changes in stylessheets/styles.css, we need to update _includes/head.html

{% if page.gallery %}
<script src='/javascripts/gallery.js' type='text/javascript'></script>

{% endif %}

and _includes/footer.html

{% if page.gallery %}
<script type='text/javascript'>
  gallery.init({
    title: [{% for titles in page.gallery %}'{{ titles.title }}',{% endfor %}],
  })
</script>

{% endif %}

Since this was more of a programming exercise, than creating a fully featured image gallery, I have included verbose comments and links to resources which may be of use to others.

If you have any comments, improvements, or bug reports feel free to comment. I will create a Github repository for this plugin after extensive cross-browser testing. Currently, I have only tested it in Chrome on Mac.