I was working on a website not too long ago and I was putting together an image gallery. If you have read some of my other posts, you know I am a fan of Advanced Custom Fields and Slick, and I wanted to use those to build out the gallery. What I was looking to do was to create a gallery of thumbnails, and when a thumbnail is clicked, an overlay is triggered that contains the whole gallery as a scrollable slideshow.

Turns out this is fairly simple to accomplish using a nice little gem called Slick Lightbox. It basically adds the overlay functionality to Slick and allows for the very thing I was hoping. Here’s how it works:

Setting Up a Gallery Custom Field

In order for this to work, you’ll want to have either the Pro version of ACF, or the gallery add-on. The first thing to do it set up a gallery custom field. The important thing to remember here is what you set the name to, that will be used in the code later on. Once you have that setup, it will look something like this:

Gallery Custom Field Setup

You’ll notice that there is an option to choose on which post type you would like to include this custom field. I have it set to “Post” here, but you can change that to suit your needs. Now that the custom field is set up, you are able to add images to it through editing whichever post type you selected. It will look something like this:

Gallery Custom Field With Thumbnails

Displaying Images on the Page

Now, to the code that will show these lovely images on the page. ACF makes this super easy. Basically, we will use a foreach loop to grab all these images and display them on the page as thumbnails. Add the following code to your theme files where you would like the image gallery to be displayed:


<?php $images = get_field('images'); ?> 

<?php if($images): ?> 

   <div class="gallery"> 

      <?php foreach( $images as $image ): ?> 

         <a href="<?php echo $image['url']; ?>" target="_blank" class="thumbnail"> 
            <img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php the_title(); ?>" /> 
         </a> 

      <?php endforeach; ?> 

   </div> 

<?php endif; ?>

In this example, I am outputting the medium size for these images, but you can change this to use large or thumbnail sizes but changing [‘medium’] to whichever size you would like to use. Also, make sure to use the name of the custom field on line 2 where is says ‘images’.

Clearly, you’ll want to style these images so that they look pretty. You can do this however you’d like, but for the sake of this tutorial, we will do something super simple and include the following CSS:


.thumbnail img {
   box-sizing: border-box;
   border: 1px solid #ddd;
   padding: 2px;
   margin: 0 1% 15px 0;
   width: 32.6667%;
   display: inline-block;
}
	
.thumbnail img:nth-of-type(3n+3) {
   margin-right: 0;
}

This CSS will place the images in rows of three. Yes, there are other ways to accomplish this, so feel free to style your thumbnails however you see fit.

Adding in the Lightbox Functionality

It is now time to make everything work. First, we will include the proper dependencies for both Slick and Slick Lightbox. Add this to the <head> of your website (or better yet, enqueue them in your functions.php):


<link rel="stylesheet" type="text/css" href="slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick/slick/slick-theme.css">
<link rel="stylesheet" type="text/css" href="slick/slick-lightbox.css">

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript" src="slick/slick-lightbox.js"></script>

Of course, be sure to insert the proper file paths to these files so that everything loads properly. Lastly, we need to initialize Slick Lightbox and let it know what element will act as a trigger. Since we wrapped our image gallery in a <div> named gallery, we can use that to target the thumbnails inside of it. Include this in your <head> or in one of your script files:


$(document).ready(function(){ 
   $('.gallery').slickLightbox({ 
      itemSelector: '> a' 
   }); 
});

And that’s it! Your image gallery with a slick lightbox should be working now.