lynda.com » lynda.com library » Open Source » Create a Sortable Photo Gallery with jQuery

Create a Sortable Photo Gallery with jQuery

with Chris Converse

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

show more show less

author: Chris Converse
subject: Developer, Web, Web Design, Projects, Web Development
software: jQuery
level: Intermediate

duration: 1h 50m
released: Mar 27, 2013

Share this course

Learn more about lynda.com

Ready to join? get started

Members who watched this also viewed

JavaScript Essential Training

jQuery Essential Training

PHP with MySQL Essential Training

WordPress Essential Training

HTML Essential Training

PHP with MySQL Essential Training (2007)

CSS: Page Layouts

Muse Essential Training

Edge Animate Essential Training

Creating a Responsive Web Design

expand all | collapse all

viewed duration

Introduction 7m 15s

Previewing the final project 1m 46s

About the exercise files 1m 8s

The software you'll need to complete this course 38s

For those using Dreamweaver 2m 23s

Starting your project 1m 20s

1. Creating the Graphics 7m 6s

Slicing and exporting web graphics 2m 35s

Creating multiple images for a responsive design 1m 55s

Creating custom thumbnails 2m 36s

2. Hooking Up the CSS and JavaScript 7m 3s

Setting the viewport scale settings 1m 51s

Linking the CSS files 1m 3s

Linking the JavaScript files 1m 22s

Enabling earlier versions of Internet Explorer 2m 47s

3. Creating HTML for the Web Layout 11m 40s

Creating the HTML containers 2m 55s

Creating the sorting links 3m 3s

Creating a thumbnail link 2m 39s

Adding more thumbnail links 2m 7s

Adding the background image 56s

4. Styling the Design with CSS 12m 36s

Styling the text and the background image 2m 43s

Adding the title with CSS 1m 28s

Adding positioning to the gallery 57s

Styling the sorting container 2m 27s

Styling the sorting links 2m 41s

Styling the thumbnails 2m 20s

5. Positioning the Thumbnails with jQuery 19m 32s

Creating a custom function to position thumbnails 1m 52s

Preparing the initial settings 2m 16s

Measuring the thumbnails and the container 4m 23s

Calculating the remainders 3m 27s

Calculating the rows and columns 2m 16s

Positioning and animating the thumbnails 2m 37s

Resetting the size of the photo container 2m 41s

6. Sorting the Thumbnails 13m 57s

Activating the sorting links 2m 35s

The custom sorting function 2m 22s

Determining the keywords for each thumbnail 2m 36s

Searching for keywords in the thumbnails 2m 44s

Setting up the animation to hide thumbnails 2m 25s

Animating the sorted thumbnails 1m 15s

7. Making the Layout Responsive with CSS 8m 39s

Adding CSS3 media queries 2m 10s

Making the title graphic responsive 2m 10s

Making the sorting box and the links 4m 19s

8. Making the Layout Responsive with JavaScript 11m 8s

Creating a custom function to check the viewport 2m 17s

Calculating the sizes 1m 41s

Using a set interval to continually run the viewport function 4m 27s

Setting the sorting box to match the thumbnail width 2m 43s

9. Applying the Lightbox to the Links 10m 34s

Adding a custom class to the lightbox links 1m 43s

Creating a custom function to detect lightbox links 3m 12s

Removing the lightbox for small screens 4m 37s

Removing debug code 1m 2s

Conclusion 39s

Where to go from here 39s

Suggested courses to watch next:

Create an Interactive Homepage Marquee with jQuery (46m 49s)
Chris Converse

Create an HTML5 Video Gallery with jQuery (59m 53s)
Chris Converse

Create a Tooltip with jQuery (54m 23s)
Chris Converse

Create Navigation Menus with jQuery (24m 1s)
Chris Converse

You must be a lynda.com member to watch this video.

Every course in the lynda.com library contains free videos that let you assess the quality of our tutorials before you subscribe—just click on the blue links to watch them. Become a member to access all 104,069 instructional videos.

get started

learn more

If you are already an active lynda.com member, please log in to access the lynda.com library.

Get access to all lynda.com videos

You are currently signed into your admin account, which doesn't let you view lynda.com videos. For full access to the lynda.com library, log in through iplogin.lynda.com, or sign in through your organization's portal. You may also request a user account by calling 1 1 (888) 335-9632 or emailing us at cs@lynda.com.

Get access to all lynda.com videos

How to access this video.

If this course is one of your five classes, then your class currently isn't in session.

If you want to watch this video and it is not part of your class, upgrade your membership for unlimited access to the full library of 2,024 courses anytime, anywhere.

learn more upgrade

You can always watch the free content included in every course.

Questions? Call Customer Service at 1 1 (888) 335-9632 or email cs@lynda.com.