Join Jen Kramer for an in-depth discussion in this video Planning the thumbnail gallery, part of Bootstrap 2: Adding Interactivity to Your Site.
The first project we're going to work on is a thumbnail gallery that is hooked up to modal windows. So this is the final state of what we're going to be building today. This is a series of thumbnails here on the left side of the screen. A little bit of text on the right side of the screen. This might be part of your web page that you've got contained somewhere under a header, a navigation, and so on and so forth. And the idea here is that you have these nice little thumbnails, when you roll over it you get this nice glow state around the thumbnail.
When you click on the thumbnail, this actually opens up a modal window with more information about this particular artist and a larger version of the piece of art. It also contains a little close x up here in the corner. A little close button down on the bottom. Both of these will get the window out of the way. So to get started on this chapter. Inside of your Exercise Files folder in Chapter One. There's a bunch of stuff that's associated with this particular project. So, first of all, there's a folder here of thumbnails. You'll want to drag the whole folder into your IMG folder inside of your Bootstrap site.
You'll also see that we have a series of larger images. You're going to drag those also into the IMG folder, inside of your Bootstrap site. And there's an HTML file. And you're going to put that inside of your Bootstrap folder. So when you're done, you should wind up with a Bootstrap folder that contains your HTML file. And your Images folder is going to contain your thumbnails as well as all of those big images inside of it. So that's going to be your starting state. And then when you open up your HTML here inside of Sublime Text 2, you'll see that I've given you some of the starting HTML. So, basically right now we have.
just a bulleted list and we have our text over here on the side. We've made use of the Bootstrap grid system here to put this site together. And if you're not familiar with the Bootstrap grid system or anything else that I happen to be talking about here, you can take a look at Up and Running with Bootstrap, which is available in the lynda.com library and that will bring you up to speed with the basics of Bootstrap. So just to show you what this page looks like to start with, I'll go ahead and open this up in a browser. so, this is what we're going to start with.
It's the list of images. There they are with our chunk of text over here on the side. If you are working with your own images and you needed to prepare some for this example. What you need to do is start with your large version of the image. It could be a really super large image, potentially something that's suitable for print quality. You're going to need to resize those for the web, and you would generally create two images. One would be the thumbnail, which would either be a cropped version of the larger image. Or it could just be a resized version of the larger image.
Depending on level of detail and so forth. And you're going to need the second image that will go inside of the modal window. If you need help in creating these images, there's two courses that I recommend that you can take a look at. One is Photoshop for Web Design, with Justin Seeley. And he's got a video down here in Chapter Nine, Optimizing Web Graphics, which talks about how you can optimize your graphics for the web. You won't need the part about slicing, but certainly the Understanding Web File Formats and Saving For the Web are the videos in that chapter that'll be really important to you.
If you're not a Photoshop person or you don't have a huge amount of money to spend, there's a great open source alternative, that is GIMP. And Justin Seeley has also done a course on GIMP essential training, and this can also be used. It's a free program that you can download, it's available for MAC and PC. You can download it, and use it to crop your images, and optimize them for the web as well. And if you want to take a look at Chapter 11. There is the option to print and save images. And there's an option for exporting for print and web.
So you're going to want to, of course, take a look at the website of exporting those images. Alright, so now that we know what it is that we're going to build you have all your images set. In the next video I'll show you how to set up your thumbnail gallery.
- Setting up your working environment
- Planning the thumbnail gallery
- Creating modal windows
- Creating an image carousel
- Linking images and adding captions
- Changing the carousel rotation
- Laying out and styling a contact form