Now, we're going to create a custom function to sort the thumbnails. …So, outside of the document ready, before our custom function of positioning the …thumbnails, we'll type function space sortThumbnails, parentheses, brackets, …split that open on the brackets. Now, let's come back and inside of the …parentheses. We want to capture a variable when we …call this function, we'll call this keyword. …Inside of this function, let's add n alert, beginning and ending parentheses, …let's put our variable keyword inside, then a semicolon.…

So now, with our custom function created, let's copy the name. …Let's come up into the sort link, let's hit a Return and what we're going to do …is get the associated keyword with this link. …So, we're going to do that by starting with the variable var space keyword. …We're going to set this equal to dollar sign parentheses this.attr, for …attribute. Another set of parentheses, semicolon.…

Inside of the parentheses for attr, we're going to type string literal …

Resume Transcript Auto-Scroll

Author

Released

3/27/2013

Give your visitors a smart and dynamic experience when reviewing your photography. This course shows how to create a photo gallery that sorts and rearranges your photos based on keywords you add to the HTML. In addition, author Chris Converse shows how to use a lightbox to display larger photos, and even allow your visitors to navigate through the lightbox—giving them an alternate navigation option to review your photos.

This course was created and produced by Chris Converse. We are honored to host this training in our library.

Topics include:

Creating and exporting web graphics

Setting up the HTML containers

Styling the layout with CSS

Tagging your gallery with data

Adding a dropdown menu

Preparing your photos and thumbnails

Adding jQuery to your project

Adding a lightbox preview for your photos

Making the layout responsive

Skill Level Intermediate

1h 50m

Duration

266,332

Views

Show MoreShow Less

Q: The files for this exercise are not complete. For example the index.html file is empty. Would you please provide the complete files?

A: These are the starter files. They ensure you're working with properly set-up HTML and CSS files. This is explained in the "About the exercise files" movie. The author then shows you how to build the entire gallery with these setup files.