MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Create a Sortable Photo Gallery with jQuery

Course Summary

Implement and customize a sortable photo gallery with jQuery.       

  • +

    Course Syllabus

       Previewing the final project
       About the exercise files
       The software you'll need to complete this course
       For those using Dreamweaver
       Starting your project
    1. Creating the Graphics
       Slicing and exporting web graphics
       Creating multiple images for a responsive design
       Creating custom thumbnails
    2. Hooking Up the CSS and JavaScript
       Setting the viewport scale settings
       Linking the CSS files
       Linking the JavaScript files
       Enabling earlier versions of Internet Explorer
    3. Creating HTML for the Web Layout
       Creating the HTML containers
       Creating the sorting links
       Creating a thumbnail link
       Adding more thumbnail links
       Adding the background image
    4. Styling the Design with CSS
       Styling the text and the background image
       Adding the title with CSS
       Adding positioning to the gallery
       Styling the sorting container
       Styling the sorting links
       Styling the thumbnails
    5. Positioning the Thumbnails with jQuery
       Creating a custom function to position thumbnails
       Preparing the initial settings
       Measuring the thumbnails and the container
       Calculating the remainders
       Calculating the rows and columns
       Positioning and animating the thumbnails
       Resetting the size of the photo container
    6. Sorting the Thumbnails
       Activating the sorting links
       The custom sorting function
       Determining the keywords for each thumbnail
       Searching for keywords in the thumbnails
       Setting up the animation to hide thumbnails
       Animating the sorted thumbnails
    7. Making the Layout Responsive with CSS
       Adding CSS3 media queries
       Making the title graphic responsive
       Making the sorting box and the links
    8. Making the Layout Responsive with JavaScript
       Creating a custom function to check the viewport
       Calculating the sizes
       Using a set interval to continually run the viewport function
       Setting the sorting box to match the thumbnail width
    9. Applying the Lightbox to the Links
       Adding a custom class to the lightbox links
       Creating a custom function to detect lightbox links
       Removing the lightbox for small screens
       Removing debug code
       Where to go from here

Course Fee:
USD 25

Course Type:


Course Status:



2 - 3 hours / week

This course is listed under Development & Implementations and Digital Media & Games Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top