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:
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:
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:
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
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:
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
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
gallery, we can use that target the thumbnails inside of it. Include this in your
head or in one of your script files:
And that’s it! Your image gallery with a slick lightbox should be working now. Here’s an example below for you to see.
Was this helpful to you? Anything you would change or do better? Let me know in the comments below.