Siene's photo gallery using PhotoSwipe

gallery.js

var albums;

$.getJSON("list.php", function(data) {
  albums = data;
  loadIndex();
});

function loadIndex() {
  if (location.hash!="") location.hash = "";
  $("h1").text("Siene Companje");
  $(".btnBack").fadeOut();
  $('.thumbs').empty();

  $.each(albums,function(index,album) {
    var filename = album.folder + "/cover.jpg";
    var title = album.title.split('-')[1];
    $('.thumbs').append('<a href="#'+index+'"><h3>'+title+'</h3><img src="thumbs/'+filename+'"></a>');
  });
}

function loadAlbum(index) {
  var album = albums[index];

  $("h1").text(album.title.split('-')[1]);
  $(".btnBack").fadeIn();
  $('.thumbs').empty();

  $.each(album.photos,function(index,item) {
    var a = document.createElement("a");
    var img = document.createElement("img");
    $(a).append(img);
    $(a).attr("data-src","photos/"+album.folder+"/"+item.filename);
    $(a).attr("data-width",item.w);
    $(a).attr("data-height",item.h);
    $(a).on("click",function() { openGallery(index,this); });
    $(img).attr("src","thumbs/"+album.folder+"/"+item.filename);
    $('.thumbs').append(a);
  });
}

function openGallery(index, galleryElement) {
  var pswpElement = document.querySelectorAll('.pswp')[0];
  var items = []; // {src:'photos/01/01.jpg',w:850, h:1280} ];

  $('.thumbs').children().each(function(index,element) {
    items.push({
      src: element.getAttribute('data-src'),
      w: element.getAttribute('data-width'),
      h: element.getAttribute('data-height')
    });
  });

  var options = {
    index: index,
    showHideOpacity:true,
    galleryUID: galleryElement.getAttribute('data-pswp-uid'),

    getThumbBoundsFn: function(index) {
      var thumbnail = galleryElement.firstChild;
      var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
      var rect = thumbnail.getBoundingClientRect(); 
      return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
    },

    history: false,
    focus: false	
  };

  var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
  gallery.init();
};

$(window).on('hashchange',function(){ 
  var hash = location.hash.slice(1);
  if (hash!="") loadAlbum(hash);
  else loadIndex();
});