Start learning with our library of video tutorials taught by experts. Get started

Create a Sortable Photo Gallery with jQuery
Illustration by John Hersey

Create a Sortable Photo Gallery with jQuery

with Chris Converse

Video: Previewing the final project

(SOUND). Hi, this is Chris Converse and this is a course on creating a sortable gallery for you website. Now, this design's going to feature a couple of interesting items. First is the ability to sort all of your Thumbnails. So, as we can see here, we're under the All Categories. If I click on Sculpture, or Winter, we'll have all of the Thumbnails rearranged based on keywords that we're going to put into the individual Thumbnails, and you'll also noticed that they rearranged their layout as well. The second thing we're going to be adding is responsive layout. So if I come over here and re-size the browser, we're going to use a combination of both CSS and JavaScript to rearrange all of the items through CSS. And rearrange the layout or composition of the Thumbnails with JavaScript. We're also going to be adding in a Lightbox so we can click on Thumbnails and see a Lightbox overlay complete with a caption. And we're also going to activate the inline gallery feature of Fancybox so while we're in our gallery, we can go next or previous so that we can see all of the photographs in a particular group.
Expand all | Collapse all
  1. 7m 15s
    1. Previewing the final project
      1m 46s
    2. About the exercise files
      1m 8s
    3. The software you'll need to complete this course
      38s
    4. For those using Dreamweaver
      2m 23s
    5. Starting your project
      1m 20s
  2. 7m 6s
    1. Slicing and exporting web graphics
      2m 35s
    2. Creating multiple images for a responsive design
      1m 55s
    3. Creating custom thumbnails
      2m 36s
  3. 7m 3s
    1. Setting the viewport scale settings
      1m 51s
    2. Linking the CSS files
      1m 3s
    3. Linking the JavaScript files
      1m 22s
    4. Enabling earlier versions of Internet Explorer
      2m 47s
  4. 11m 40s
    1. Creating the HTML containers
      2m 55s
    2. Creating the sorting links
      3m 3s
    3. Creating a thumbnail link
      2m 39s
    4. Adding more thumbnail links
      2m 7s
    5. Adding the background image
      56s
  5. 12m 36s
    1. Styling the text and the background image
      2m 43s
    2. Adding the title with CSS
      1m 28s
    3. Adding positioning to the gallery
      57s
    4. Styling the sorting container
      2m 27s
    5. Styling the sorting links
      2m 41s
    6. Styling the thumbnails
      2m 20s
  6. 19m 32s
    1. Creating a custom function to position thumbnails
      1m 52s
    2. Preparing the initial settings
      2m 16s
    3. Measuring the thumbnails and the container
      4m 23s
    4. Calculating the remainders
      3m 27s
    5. Calculating the rows and columns
      2m 16s
    6. Positioning and animating the thumbnails
      2m 37s
    7. Resetting the size of the photo container
      2m 41s
  7. 13m 57s
    1. Activating the sorting links
      2m 35s
    2. The custom sorting function
      2m 22s
    3. Determining the keywords for each thumbnail
      2m 36s
    4. Searching for keywords in the thumbnails
      2m 44s
    5. Setting up the animation to hide thumbnails
      2m 25s
    6. Animating the sorted thumbnails
      1m 15s
  8. 8m 39s
    1. Adding CSS3 media queries
      2m 10s
    2. Making the title graphic responsive
      2m 10s
    3. Making the sorting box and the links
      4m 19s
  9. 11m 8s
    1. Creating a custom function to check the viewport
      2m 17s
    2. Calculating the sizes
      1m 41s
    3. Using a set interval to continually run the viewport function
      4m 27s
    4. Setting the sorting box to match the thumbnail width
      2m 43s
  10. 10m 34s
    1. Adding a custom class to the lightbox links
      1m 43s
    2. Creating a custom function to detect lightbox links
      3m 12s
    3. Removing the lightbox for small screens
      4m 37s
    4. Removing debug code
      1m 2s
  11. 39s
    1. Where to go from here
      39s

Watch this entire course now —plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Watch the Online Video Course Create a Sortable Photo Gallery with jQuery
1h 50m Intermediate Mar 27, 2013

Viewers: in countries Watching now:

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
Subjects:
Developer Web Web Design Projects Web Development
Software:
jQuery
Author:
Chris Converse

Previewing the final project

(SOUND). Hi, this is Chris Converse and this is a course on creating a sortable gallery for you website. Now, this design's going to feature a couple of interesting items. First is the ability to sort all of your Thumbnails. So, as we can see here, we're under the All Categories. If I click on Sculpture, or Winter, we'll have all of the Thumbnails rearranged based on keywords that we're going to put into the individual Thumbnails, and you'll also noticed that they rearranged their layout as well. The second thing we're going to be adding is responsive layout. So if I come over here and re-size the browser, we're going to use a combination of both CSS and JavaScript to rearrange all of the items through CSS. And rearrange the layout or composition of the Thumbnails with JavaScript. We're also going to be adding in a Lightbox so we can click on Thumbnails and see a Lightbox overlay complete with a caption. And we're also going to activate the inline gallery feature of Fancybox so while we're in our gallery, we can go next or previous so that we can see all of the photographs in a particular group.

And this will also work on sorting. So if I sort here on plants, then click on one of the plants, and either click the arrows or use my arrow keys, I can arrow it through just the photography that that relates to plants. Now the final example in this response of experience, is going to be for small screen devices. Now since the Lightbox experience doesn't translate well to small screen devices, instead we're going to take out the Lightbox link and link right to the individual photographs. So on a mobile device, when I tap on a Thumbnail, we're going to open the hi-res Thumbnail in a new Window, and then we can use all of the device's features, such as double tapping, or pinching, and panning around, and then when we're done, we can go back to the main gallery to see the next photograph we want to look at.

So this user experience is going to be modified through JavaScript. So I hope this course sounds interesting to you, and if so, let's get started.

Find answers to the most frequently asked questions about Create a Sortable Photo Gallery with jQuery .


Expand all | Collapse all
please wait ...
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.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Create a Sortable Photo Gallery with jQuery.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.