Join Jen Kramer for an in-depth discussion in this video Clearing: A responsive lightbox, part of Up and Running with Foundation 4.
We've slowly been working on a thumbnail example through the last few chapters. In the grid chapter, I showed you how to lay out a series of thumbnails using unordered lists and the appropriate Foundation classes. Then in the styling chapter, we applied a thumbnaily sort of look to our images. Now, finally, we're going to link these same thumbnails up to larger versions of the pictures. We can also apply captions to the images. This is the page that we're going to start with, I'm showing you here in the browser first. I'll show you the HTML in just a moment.
And this is in Firefox. So I've got a simple little Foundation page here, little text on the top, some thumbnails underneath. When you click on these thumbnails, they're actually going to take you to a large version of the picture. This looks pretty awesome here inside of Firefox. There's a larger version of that artist, right there. And they all sort of work like this, but it looks a little bit different in Chrome. So if you were to look at this exact same page here in Chrome and click on these pictures, the display is actually quite different.
That's because if you take a look at the URL, all I've done is link to a large version of the picture. Firefox, as a browser, has a nicer way of displaying the large version of the picture than Chrome does. So, what I'd like to do now is, I'd like to find a way I can take my thumbnails, display a larger version of the picture. Maybe throw a caption in and maybe find a really cool way of displaying these. Working with the markup that I already have here. So I'm going to go ahead and show you that now. If you take a look at your sublime text and open up the document called five-clearing.html.
It's inside of your exercise files folder. We're going to go ahead and take a look at what markup we have to start with. This is a row, I have set this up as a large six, but centered on the page. And then we have a block of text here at the top. And then underneath, we just have and unordered list with a small block grid applied to this, three across. And we have a link that goes to the large version of the picture, that goes around the thumbnail version of the picture. And that's pretty much the whole mark up that's here on this particular page.
Now, what I would like to do is add some additional mark up to make this a very interesting effect that Foundation calls Clearing. To make this work in the Clearing format, there's a couple of little pieces of code that I need to add. Here in the UL, the class of small block three, I'm going to add another item here. Clearing-thumbs. I'm also going to add one more attribute to the UL, and that attribute is data-clearing, just like that.
And sometimes you'll just see them this way. Remember that in HTML, you don't have to have the equals sign in the assignment of value in the way you do in a XHTML web page, where you always have to assigning a value. Let's just go ahead and take a look at just that little bit of additional code added to the page. If I save this and I display this inside of my Firefox browser. Now, when I click one of these pictures, look at the cool thing that we get as a result. This is actually sort of like a modal window that we have going on here.
I can click each one of these pictures, these below are the thumbnails from that page. I can flip through these, using these arrows so that I can flip through them. Or I can go directly to somebody's picture by clicking on it here down in the lower navigation. That is so awesome. And it was pretty easy to build this. That is one thing that you can do here with these thumbnail grids inside of Foundation. There's other ways you can make this behave as well.
On the li, the very first li on the list here, if I add a class of clearing-feature. We're going to get a slightly different treatment for this page. So we still need the clearing thumbs up here on the UL, we still need that data-clearing attribute. And then on the li, we're going to add a class of clearing-feature. Now, if you saved that and put that inside of your web browser, you'll only see one thumbnail here on the page rather than all of them at once. And when you click on the one thumbnail, you'll still get the same interface. So this is kind of like taking you to a gallery of more images. Sometimes you see these on news site.
You know, we've got the one image on the page and you click on that, and it takes you into something else where you can see more images. By adding that one tiny little class here to that li, you've got something similar to that. Probably, this page would work better design wise, if I didn't use just a thumbnail. Maybe I have a larger version of the picture, maybe I have some text that's on top of it or something that would explain what happens when you click the picture. And then the last thing I want to add is, when we go into our gallery right now, there is no caption for these pictures, but a caption might be something that you'd want to add. That is something that is possible.
So anything that I put here in between these quotes will wind up being the caption. So this is a caption for the photo. Now, if I do that, and view this in my webpage again, just refresh here. When I click on my picture, here's my caption for the photo underneath. And if I went through and added that for all of these pictures, we'd have a caption underneath all of these photos. This is the clearing feature inside of Foundation. Very, very interesting feature. A very attractive way of presenting a nice and interactive gallery of images. You can add captions, and there's a couple of different ways of presenting this information on your webpage.
- What is Foundation?
- Exploring the grid system
- Working with lists
- Styling buttons, thumbnail images, and more
- Including flexible video
- Adding breadcrumbs to the navigation
- Working with Clearing, the responsive lightbox
- Creating accordion panels and tabs for in-page navigation