Gilding the Gallery 3: Ajaxifying the filterable gallery

Last time we set up the PHP (slash HTML, slash CSS) to dynamically generate Media Library Assistant gallery shortcodes and an album menu. Everything works without any JavaScript. Today we’re going to add JavaScript, with jQuery, to do three things.

  1. Hide the album menu under a button, a la a mobile menu.
  2. Use AJAX to reload only the portion of the page containing the gallery.
  3. Push each new URL into the browser history, so that the back button works and individual albums can be bookmarked.

Gilding the Gallery 2: MLA + front-end filtration

Screenshot of gallery without JavaScript functionality

The reason I wanted to use Media Library Assistant for the Flickity carousel was to coordinate with a set of albums that can be easily navigated by the site visitor, and easily managed by the site owner. This process is split into two posts. Here’s today’s outline:

  1. Use MLA to apply Att. Categories to images, where the categories are the albums.
  2. Use WordPress’s get_terms() function to generate a list of all categories, and within each, a list of all subcategories. Make each list a link that applies a query string to the URL when it is clicked.
  3. Use the value in the query string to build the appropriate mla_gallery shortcode, and have a default for when the page is first loaded. Execute the shortcode with do_shortcode().