In July, as I worked on adding more LEGO entries to my LEGO page, I realized something. I was adding a lot of pictures. And over time, I’d slowly be adding more. And images, unless you make them really tiny, take up a lot of precious screen space, requiring users to scroll a lot more to bypass lists of pictures. And if they’re not zoommable, what does somebody do when they want to take a closer look?
So, the answer to my questions was, to make pictures zoommable, and then show a thumbnail on the general page. This way, the image a user sees on the page is tinier (think 200 pixels wide), and then when they click it, it becomes full-screen (perhaps around 600 pixels wide).
So from a preliminary Google search, I realized what I needed was fancy Javascript/CSS to make this happen. I found the Lightbox2 solution pretty early on into my searching, and it looked so professional that I realized that I needed to give this a go.
Check out a tiny demo of what Lightbox2 looks like in action:
Without Lightbox:
With Lightbox2 (click the picture):
Implementing Lightbox2 seemed simple. Copy-paste a CSS file, a Javascript file, and four images, all from Lightbox2’s source code, to your project. And then call them from your <head> and as a <script>:
<link rel="stylesheet" href="/assets/css/lightbox.min.css">
and
<script src="/assets/js/lightbox.min.js"></script>
And then just call your image with a data-lightbox element:
<a href="https://example-image.com" title="Example image goes here" data-lightbox="IMAGE-1">
<img class="image" src="https://example-image.com" width="200" alt="Example image goes here">
</a>
But, I quickly ran into issues where the images wouldn’t get bigger on-click. To understand what I mean by the images not getting bigger, check out the official Lightbox2 demo or try to imagine my cute picture from above in its smaller form, but not getting bigger when you click on it. The photo is supposed to grow to full-size upon click, allowing a user to see even a small image more clearly.
Well, the solution was that my version of Jquery was outdated. The notes from the documentation tell us that we must use 1.7+ version of Jquery and it doesn’t support the slim builds, so my Jquery was broken in two ways—apparently I missed that in my set up. So I ended up just taking Lokesh’s version of Jquery and Sizzle, and replacing my Jquery with those. There’s also a note which states the order that the JS files are loaded matters, and of course I had about 10 minutes of struggling while I learned that on my own.
The only pieces that I eventually customized was the fonts I wanted the captions to use, the resizeDuration to 500 instead of 700 so that my images would load a bit faster, and the disableScrolling to true instead of false to prevent scrolling while the images are open. Both of those two values I set directly inside my JS file, and the font change was set directly in my CSS file.
In order to make the use of Lightbox2 a little bit more Jekyll friendly, I realized that I didn’t really want to be copy-pasting a bunch of HTML code all over the place. What I wanted was a single “method” that could be reused. Although there isn’t an easy solution for this in Liquid/Jekyll, what I decided on was an _includes file:
<a href="{{ include.url }}" caption="{{ include.title }}" data-lightbox="{{ include.lightbox_gallery }}">
<img class="image" src="{{ include.url }}" width="{{ include.thumb_width }}" alt="{{ include.title }}">
</a>
And then, we can call it like this:
{% include photo.html url="https://example-photo.com" thumb_width="150"
caption="Title of example photo" lightbox_gallery="PHOTO-1"
%}
Note the lightbox_gallery property is for grouping sets of photos together on a page (particularly handy on pages like my LEGO page where there’s multiple sets of photos all on one HTML page).
And voila! There’s still some copy-pasting, but it’s a little easier than copy-pasting a bunch of repetitive HTML (which calls the URL twice, the title twice, etc).
After the first few hours of installation pain (which could’ve been greatly eased if I read all of the instructions before beginning), Lightbox2 has been flawless ever since. It’s worked well for everything I’ve used it for, and I can’t imagine going back. All of my photos look so much more professional now, both on larger screens and on mobile.
If this blog post has interested you, feel free to check out a newer blog post, all about switching from Lightbox2 to Photoswipe: Turning Lightbox2 into PhotoSwipe.
