Добавление pushState() и popstate в мой проект

По сути, вы хотите преобразовать обработчик кликов вашего альбома в функцию, которую можно вызывать вне инициализации для создания представления альбома, а затем вызывать эту функцию как при нажатии на альбом, так и при popstate (назад-вперед).

Чтобы это произошло, вы должны хранить ссылку на данные JSON, которые вы извлекаете для создания галерей (либо сами данные, либо XHR, которые вы использовали для их извлечения). Таким образом, мы можем написать функцию «showAlbum», которая вместо этого принимает индекс или идентификатор, который мы можем использовать для доступа к выбранному альбому в данных.

Что-то вроде этого:

// As you're doing your initialization, process the JSON array of albums
// into a hash by ID (this is one of many ways to go about this, a more
// robust solution would be to use the XHR promise to ensure the JSON is
// always there when you need it).
var albumData = {};

function initialize () {
  $.getJSON('/assets/js/images.json', function(json) {
    $.each(json.albums, function(i, item) {
      var photos = item.photos,
          name   = item.name,
          id     = item.id;

      // Same as you have now, but with this line:
      albumData[id] = item;

      showAlbums(photos, name, id);
    });  
  });
}


// Then we create a function to show an album by ID, essentially the same as
// your click handler now, but retrieving the data from the structure we
// built out of the JSON.
function showAlbumById (id) {
  e.preventDefault();
  var album = albumData[id]
    , photos = album.photos
    , name = album.name;
  albums.hide();
  gallery.empty().show();
  document.title = "Schultz | " + n;
  $.each(photos, function(i, item) {
    showGallery(item.href, name);
  });
});

Затем вы замените обработчик кликов вашего альбома, чтобы вместо этого нажать на состояние и вызвать эту функцию. Здесь я использую переменную запроса для представления состояния в URL-адресе и theAlbumId для ясности (в коде на нее ссылается i). Если вы добавите кнопку «назад к альбомам», вы сделаете аналогичный обработчик, но отправите URL-адрес без запроса var.

album.on('click', 'a', function(e) {
  e.preventDefault();
  history.pushState({}, '', '?id='+theAlbumID);
  showAlbumById(theAlbumId);
});

Это должно обрабатывать часть вещей pushState, но часть вещей popstate требует больше работы. Нам нужно иметь возможность перемещаться как назад, так и вперед между обоими состояниями: показывать один альбом или показывать индекс альбома. Для этого вам нужно добавить обработчик события popstate.

// define `onpopstate` or add a listener for `popstate` on the window
window.onpopstate = function (state) {
  // pseudocode, you'd need to write or find a function to pull query vars
  var albumId = getQueryParameter('id');

  // if an album ID is in the query string, show it
  if (albumId) {
    showAlbumById(albumId);
  } 
  // otherwise show the index (this should probably be another function)
  else {
    albums.show();
    gallery.empty().hide();
    document.title = "Schultz";
  }
};

Затем, наконец, чтобы обработать пользователей, обновляющих страницу или напрямую посещающих URL-адрес альбома, вы также захотите проверить строку запроса на наличие идентификатора альбома при загрузке страницы и показать альбом так же, как в popstate (в некоторых браузерах popstate запускается на страница загружается, но не должна)