Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
For the next lesson we're going to use jQuery to build an Image selector. You've probably seen these before. You've probably even built one before. Let me just open up the Groundswell_Final site so you can see what I'm talking about. So, let's go to the Lifestyle section and click on Photos. You can see that as I click on the different photos the image in the large image area changes whenever I click on one of the thumbnails. You can also see that this text down here in the caption area, that's changing as well.
Now, you've probably built one of these before and they are relatively straightforward to build. But we're going to use jQuery to build one that is inherently extensible and can be accomplished in just a couple of lines of code. So, let's go build that now. Let me go back out to the file system here. So, let's go to the Start site. I'm going to open up the site in my editor. So, this is the home page. What we need to open up actually is the images page.
So, I'm going to go to the Lifestyle, and open the photos page. Okay! So, this is photos page. So, just put a design view really quick. So, here are the photos. This is the large photo right here. You can see it has an id of photo_large on it. Then is this guy here, this is the caption area. And over here are the individual thumbnails for each one of the images. So, let's go to the code view. You can see that each one of the images has an id, and an alt attribute set, and a class and so on.
So, what we're going to do is encase each one of these images in a link, so that when they are clicked on, the event will be handled by our jQuery code. So, what we're going to do is put an anchor or a link tag in front of each one of these guys, a href=, and then we'll supply a pointer to the image and then we'll close the link on each one of these guys.
So, the images are located a directory up. So, I'm going to do that and then, _images. The way the images are named, you can see that in this case it is pointing to ventura_01_thumb. The large version doesn't have this _thumb on the end. So, we're just going to copy that and scroll back and paste that in there and it's .JPG.
So, now we're going to do that with each one of these guys. So, I'm going to Copy and I'm going Paste, and Paste, and Paste. And we'll update each one of these indexes. Now, we have links that are pointing to the images. There's a couple of other things that we need to do. What we're going to do also is place a Title attribute on the link. The title is what we'll use for the caption.
So, for this title it is "Getting ready to hit Surf." And this title is "Clearly marked!" And this title is "Checkout the windsurfers in the background," and then the last title is "Winding down." Now, we've got the links wrapped around each tag.
The source, I'm going to point that to jQuery library. And our jQuery library is located one directory up in scripts, and that is jQuery-1.3.2.min.js. Now, we've got the script included. What we need to do now is write our script that is going to handle the image clicking. Let's do that.
So, here is what we want to do. When the document loads, we're going to setup the event handling code to handle clicks on each of the images, and then set the large image to be the large version of the thumbnail that was clicked on. I'm going to write a jQuery function that executes when the page loads. And what we want to do is loop over all of the link tags that we just added and setup click handlers on each one of them. We only want to do this, however, for links that are enclosing images that have the Gallery class applied to them because the gallery.css style sheet indicates that it's a thumbnail in the image.
Just go down, and you'll see what I'm talking about. So, here on this image, you can see each one of these guys has a Gallery class. So, we only what to do this for links that have the Gallery class applied. So, what we're going to do is write a little jQuery to figure that out for us. So, we're going to look for links and we're going to use the jQuery has selector. Remember this is one of the content selectors I talked about. So, we're going to look for links that have image with Gallery class applied to them. And assuming we find any, we're then going to assign click handlers to each one.
The click handler is going to be a function. Inside the click handler, what we're going to do is declare a couple of variables. So, first we're going to declare a variable called largePath. We're going to point that at this. So, remember, when this function gets called it's getting called because of a click on a link. So, that this keyword will point to the link object that this applies to. So, we're going to get the attribute for the href from the link.
Then we're going to get the caption from the title. So, now we have the caption and path from an href and title. So, now what we need to do is go find that large photo and that guy should be right around here somewhere. So, down here in the mainContent. Here is the image. That's the photo_large. So, we need to set that guy.
So, we get a reference to the large photo. We're going to set its attributes. So, we're going to set the source attribute to be the largePath that we just defined. And then, we're going to set the contents of the caption element. Where is that? Caption element should be down here somewhere. Yup! There's caption1 right there. In fact, we can get rid of these other guys from the base site, because we don't need them anymore.
We're going to set the content of caption1. We're going to set its text content to be the caption that we just applied. Now, the last thing that we need to do is we don't want these links to be followed. We don't want the browser to actually try to follow the link. So, we need to return False from this event handler. That will tell the browser, don't worry about it, we've handled it. You don't need to go ahead and follow the link. And we've written the code.
Let's make sure everything looks right. Okay! Let's go back out to the browser. So, now we're going to open up the version in the Start folder. So, yup, this is the start version. Let's go to the Index page, go to the Photos. So, you can see now that as I'm clicking both the caption and the large image are changing. All right! This is extensible. So, now if I go back to the code.
Let's imagine that we added a whole bunch of new images and we'll just do a Copy and Paste. So, now if we go back to the browser and we refresh, you can see that a whole bunch of new images have been added, but it's still responding to the same event handler. We'll didn't have to update the event handler code, at all. That's using jQuery to build an image selector. Let's move on to the next example.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105433 Viewers
56 Video lessons · 117121 Viewers
71 Video lessons · 86347 Viewers
131 Video lessons · 41262 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.