From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Photoswipe lightbox

Photoswipe lightbox - Next.js Tutorial

From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Start my 1-month free trial Buy for my team

Photoswipe lightbox

“

So now we're going to create a lightbox effect on our property page. So we're going to use something called Photoswipe and React Photoswipe Gallery. So we're going to want to install that. And it's pretty easy to use. We're just going to bring in gallery and item. And then we wrap everything in gallery. And we wrap our image in an item component. And then basically in this function here that takes in ref and open. And then we just add those props. All right, so let's go ahead and install what we need. So down in the terminal, I'm going to say npm install. And we want to install both Photoswipe itself and React dash Photoswipe dash gallery. And then let's see, we're going to need to bring the CSS in, which you can get right from here. That's going to go in our layout. So let's go to App, Layout. And I'll just put this up here with the other CSS files. OK, so we get that. Now we're going to go into the Property Images component, because that's where all of these are. So components…

Contents