<html> <head>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  #gallery {
    max-width: 100%;
    margin: 1em auto;
    padding: 1em;
    box-shadow: 2px 2px 3px #fff;
  }
  .image-row {
    display:block;
    margin: 0.25em;
  }
  .image-row:after {
    display: block;
    content: " ";
    clear: both;
  }
  .image-row li {
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    float: left;
    height: 5em;
    list-style: none;
    margin: 0.25em;
    transition: opacity 300ms;
    width: 5em;
  }
  .image-row li:hover {
    opacity: 0.5;
  }
  .image-row li img {
    width: 100%;
  }

  .hero-image {
    display: block;
    text-align: center;
    height: 80%;
  }
  .hero-image img {
    max-width: 100%;
    max-height: 100%;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script type="text/javascript">
  angular.module("gallery", []);
  angular.module("gallery").controller("GalleryController", function($scope, $window, $http) {
    var basePath = '';
        uuid = $window.location.search.split("=")[1];

    $scope.page = 1;
    $scope.limit = 50;
    $scope.images = [];
    $scope.count = 0;
    $scope.heroImage = null;

    buildCounter = function(count) {
      var a = [],
          pages = getPageCount();

      for (var i = 1; i <= pages; i++) {
        a.push(i);
      }
      return a;
    };

    $scope.imageSource = function(image, size) {
      return basePath + "/" + image[size];
    };

    $scope.setHeroImage = function(image) {
      $scope.heroImage = image;
    };

    function getPageCount() {
      var lastPage = Math.ceil($scope.count / $scope.limit);

      if (lastPage < 1) {
        lastPage = 1;
      }

      return lastPage;
    }

    $scope.fetchImages = function() {
      var imagesUrl;

      $scope.limit = parseInt($scope.limit);

      if ($scope.limit >= 1) {
        var newLastPossiblePage = getPageCount();

        if ($scope.page > newLastPossiblePage) {
          $scope.page = newLastPossiblePage;
        }

        imagesUrl = "/gallery/images?page=" + $scope.page + "&limit=" + $scope.limit + "&uuid=" + uuid;

        $http.get(imagesUrl).then(function(results) {
          $scope.count = results.data.count;
          $scope.basePath = results.data.base_path;
          $scope.images = results.data.images;
          $scope.heroImage = $scope.images[0];

          $scope.imagePages = buildCounter($scope.count);
        });
      }
    }

    $scope.fetchImages();
  });
</script>

</head> <body ng-app=“gallery”>

<div ng-controller="GalleryController">
  <div class="hero-image">
    <img ng-src="{{basePath}}/{{heroImage.filename}}" />
  </div>

  <select ng-change="fetchImages()" ng-model="page" ng-options="page for page in imagePages track by page">
  </select>

  <input ng-model="limit" type="number" min="1" max="50" ng-change="fetchImages()" />

  <ul class="image-row">
    <li ng-repeat="image in images" style="background-image: url({{imageSource(image, 'thumbnail')}})" ng-click="setHeroImage(image)"></li>
  </ul>
</div>

</body> </html>