U.S. Presidents

This example uses $.each() to loop through a JSON file and identify the object that matches the clicked image. Click any U.S. president to see information about him. This version does not use $.ajax().

First, jQuery loads the images into a CSS flexbox container, which distributes them in a grid. Note that by default, flexbox would distort the images that are shorter in height than others in their row; the property to correct that is align-self. Ideally, in this layout, all the images should be the same width and height. These images are all 300 pixels wide; however, the height varies.

President

Party:
"Party"
Took office:
"Took-office"
Age:
"Age-when-took-office"
Left office:
"Left-office"
Home state:
"Home-state"
Occupation:
"Occupation"
College:
"College"
Born:
"Birth-date" "Birthplace"
Died:
"Death-date" "Location-death"
Read more:
Wikipedia

You should see 45 presidential portraits above. Code on GitHub.