In this tutorial you’re going to cover the steps to creating a simple, custom, accessible image lightbox inside a GatsbyJS application. You can check out the finished example on GitHub (Demo) or continue reading to dive right into the magic.
If you don’t have Gatsby installed, open up your terminal and type in:
Then, still in your Terminal, head over to a folder you’d want to get started in and type in:
Once it’s done scaffolding the starter application, type in:
Now open up your browser to
http://localhost:8000 and you should see the starter application ready to go.
Open up your favorite code editor to start setting stuff up.
Dealing with images on the web has always been an issue. You have to have the right sizes, you have to have the right formats, if something is too big, it will load slowly, etc. Luckily, Gatsby built a plugin to handle images elegantly called
gatsby-image. Using Gatsby’s GraphQL queries, you can request different sizes, formats and have a few options as to how you want to handle the image load. For this tutorial you’ll be using a blur up approach, similar to how Medium handles their images.
If you open up the
index.js file in the pages folder, you’ll see there is an
<Image/> component that does exactly that.
You’ll take a similar approach.
You’ll put all of the images in a folder inside
src/cars (You can get them from the GitHub repo or use your own, just make sure to follow a similar format). Then, you’ll edit the
gatsby-config.js file to expose that folder to a GraphQL query.
Add that under the existing filesystem config and then restart your Gatsby server (I believe it’s necessary for it to build the query before calling it).
Now that you have configured the filesystem, go ahead and create a component that will request all the images with a GraphQL query.
Create a new file inside
Notice how the
StaticQuery component is using a render prop where it’s returning your
Lightbox component. For now, it’s a simple component inside
components/lightbox.js that looks like this:
By now, you should have all the images displaying on the home page and doing a fade-up load.
For styling, you’re going to be using styled-components. To get it configured with Gatsby, run the following inside your terminal in your application:
And add the following to
Lets restart the application to make sure the config has taken its effect. Now, you’re going to create a simple
LightboxContainer styled component to wrap your images in. Your
lightbox.js component should look like this now:
Now the page should look something like this:
Creating the Lightbox
For the sake of accessibility, you’ll be using Dialog from Reach UI – shout out to Ryan Florence for making awesome, accessible tools for React. As a side note, Gatsby’s router is using
@reach/router under the hood, so you’re keeping it in the family ? .
Go ahead and install all the dependencies:
And configure a basic dialog inside the
Now, when you click the
Show Dialog button, you should see something like this:
Connecting the image click to the Lightbox
Now, you’re going to convert each
Img component into a button that you can click that will trigger the lightbox to open up with the right image selected. Here’s how you do that:
Now, if you click on one of the images, it should look something like this:
Now you can go ahead and implement this in your e-commerce store, picture gallery, or anywhere else you might see fit ? .
Feel free to tweet me if you have any questions, comments, requests or just want to show some ❤️.