Sooner or later you, as an aspiring Frontend Developer, will need to implement a Lightbox-related feature of some kind in your project. Maybe your client is requesting a simple slideshow, or you need to add a zoom-on-click functionality to those project images you have been adding to your online portfolio the entire week?

Whatever the reason might be, having a decent Lightbox script inside your handy-dandy toolkit is a must for any serious Developer. Creating your own solution from scratch is always going to be an option, but nowadays – with ever increasing number of open source solutions, there is no valid reason to reinvent the wheel.

Just to clarify for those that may not know before continuing, Lightbox library is any JavaScript library that allows isolation of a visually stimulating content (read: images & videos) from the rest of the page. This is usually achieved by displaying the said content inside a modal and dimming the background around it.

Most well-rounded Lightbox scripts aren’t free, so finding a single solution that can be used to solve multiple problems you may encounter during project development is challenging to say the least. Luckily for you, I walked that path so you don’t have to.

My criteria was relatively strict, the Lightbox library had to be:

  • jQuery Library
  • Open Source
  • Released under the MIT license
  • Responsive
  • Support all modern browsers
  • Work flawlessly on mobile devices
  • Have proper documentation

The library also had to allow me to create gorgeous animated slideshows with minimal amount of work, and specify width/height of the content. Single solution that has met all of the requirements I’ve imposed was Lightcase, a jQuery library available on GitHub.

GitHub Repository
https://github.com/cbopp-art/lightcase

There is no publicly available CDN hosting the library so you will need to download the assets from GitHub directly and include them to your project. You should also keep in mind that, while there are only two files, they are not minified so that is something you may need to take care of.

<link rel="stylesheet" type="text/css" href="lightcase/assets/lightcase.css">
<script type="text/javascript" src="lightcase/assets/lightcase.js"></script>

Now, let’s say that you want to implement a basic zoom-on-click functionality on series of thumbnails like in the example below. Thumbnails are wrapped with anchor elements linking to full images that should be displayed by our absofreakinlutely awesome library, and data attribute is simply used to mark them as Lightcase links.

<div class="images">
    <a href="image/image-1-full.jpg" data-rel="lightcase">
        <img src="image/image-1-thumb.jpg" alt="Example 1" />
    </a>
    <a href="image/image-2-full.jpg" data-rel="lightcase">
        <img src="image/image-2-thumb.jpg" alt="Example 2" />
    </a>
    <a href="image/image-3-full.jpg" data-rel="lightcase">
        <img src="image/image-3-thumb.jpg" alt="Example 3" />
    </a>
</div>

To create a slideshow you simply need to alter the data attribute and specify the name of the collection ex. my-slideshow like in the following example.

<a href="image/image-1-full.jpg" data-rel="lightcase:my-slideshow">
    <img src="image/image-1-thumb.jpg" alt="Example 1" />
</a>

The only thing left to do is to select the appropriate anchor elements and execute the Lightcase function on them. Easy right?

$(".images > a").lightcase();

Zooming images, and image slideshows are only the tip of the iceberg, so if Lightcase peaked your interest I definitely suggest that you review it’s documentation linked below.

Full Documentaiton
https://cornel.bopp-art.com/lightcase/documentation

CodePen Demo
https://codepen.io/djordje-jocic/full/bGNKbdr