Implement and customize a sortable photo gallery with jQuery.
We're also gonna be adding in a Lightbox so we can click on thumbnails and see a Lightbox overlay, complete with a caption, and we're also gonna 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 through just the photography that relates to plants. Now, the final example in this responsive experience is gonna be for small-screen devices.
This course was created and produced by Chris Converse. We are honored to host this training in our library.
- 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
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.