Photo Gallery Testbed

by ksoncan34

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<div id="imageGalleryPage" ng-app="galleryApp" ng-controller="GalleryCtrl">
    <span id="albumHolder">
        <label for="galleryAlbums">Album<label>
        <select ng-model="album" ng-init="album=albums[0]" ng-options="album.name for album in albums"></select>
    </span>
    <span id="searchHolder">
        <label for="galleryQuery">Search:</label>
        <input id="galleryQuery" ng-model="query">
    </span>
    <span id="orderHolder">
        <label for="orderGallery">Sort by:</label>
        <select id="orderGallery" ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>
    </span>
    <span id="zoomHolder">
        <label for="galleryZoom">Zoom:</label>
        <input id="galleryZoom" ng-model="zoomSize" type="range" min="1" max="10"/>
    </span>
    <div id="imageGallery" class="resizeGalleryVertical zoomLevel{{zoomSize}}">
        <div class="photoHolder" ng-repeat="photo in photos">
            <div class="photoClass" data-id="{{photo.id}}" ng-attr-style="background-image:url({{photo.thumb_url}})"></div>
            <span>{{photo.caption}}</span>
        </div>
    </div>
</div>

CSS

.photoHolder {
    height: 0;
    display: inline-block;
    -webkit-transition: width .2s ease-out, padding-bottom .2s ease-out;     
    border: 4px solid #dfe2e2;    
}

.photoClass {
    display: inline-block;
    background: #eee;
    background-image: url(../img/preview.png);
    box-sizing: border-box;    
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.zoomLevel10 .photoHolder {
    width: 100%;
     padding-bottom: 100%;    
}


.zoomLevel9 .photoHolder {
    width: 50%;     
    padding-bottom: 50%;    
}


.zoomLevel8 .photoHolder {
    width: 33%;
    padding-bottom: 33%;    
}

.zoomLevel7 .photoHolder {
    width: 25%;
    padding-bottom: 25%;    
}


.zoomLevel6 .photoHolder {
    width: 20%;
    padding-bottom: 20%;    
}


.zoomLevel5 .photoHolder {
    width: 16%;
    padding-bottom: 16%;
}

.zoomLevel4 .photoHolder {
    width: 14%;
    padding-bottom: 14%;
}

.zoomLevel3 .photoHolder {
    width: 12%;
    padding-bottom: 12%;    
}

.zoomLevel2 .photoHolder {
    width: 10%;
    padding-bottom: 10%;    
}

.zoomLevel1 .photoHolder {
    width: 8%;
    padding-bottom: 8%;
}

JavaScript

var myApp = angular.module('galleryApp', []);

myApp.controller('GalleryCtrl', function ($scope) {
    
    $scope.albums=[{"id":"3","name":"My Photos"},{"id":"20","name":"Mexico"}];
    $scope.photos=[
    {
        "id": "21297",
        "album_id": "3",
        "full_url": "http://ite-neoclassic.devel.mha.local/neoclassic/photo_roll/p916/5916/52d47d34e6ce3.jpg",
        "width": "1800",
        "height": "1350",
        "medium_url": "http://ite-neoclassic.devel.mha.local/neoclassic/photo_roll/p916/5916/52d47d34e6ce3_768x576_116704_70.jpg",
        "thumb_url": "http://ite-neoclassic.devel.mha.local/neoclassic/photo_roll/p916/5916/52d47d34e6ce3_225x168_116704_70.jpg",
        "caption": "DSC05077",
        "date": "2012-11-21 12:13:06"
    },
    {
        "id": "21298",
        "album_id": "3",
        "full_url": "http://ite-neoclassic.devel.mha.local/neoclassic/photo_roll/p70/70070/52d47d38a5cdb.jpg",
        "width": "1800",
        "height": "1350",
        "medium_url": "http://ite-neoclassic.devel.mha.local/neoclassic/photo_roll/p70/70070/52d47d38a5cdb_768x576_116705_70.jpg",
        "thumb_url": "http://ite-neoclassic.devel.mha.local/neoclassic/photo_roll/p70/70070/52d47d38a5cdb_225x168_116705_70.jpg",
        "caption": "DSC05078",
        "date": "2012-11-21 12:13:11"
    },
    {
        "id": "21299",
        "album_id": "3",
        "full_url": "http://ite-neoclassic.devel.mha.local/neoclassic/photo_roll/p639/60639/52d47d3c199ea.jpg",
        "width": "1800",
        "height": "1350",
        "medium_url": "http://ite-neoclassic.devel.mha.local/neoclassic/photo_roll/p639/60639/52d47d3c199ea_768x576_116706_70.jpg",
        "thumb_url": "http://ite-neoclassic.devel.mha.local/neoclassic/photo_roll/p639/60639/52d47d3c199ea_225x168_116706_70.jpg",
        "caption": "DSC05079",
        "date": "2012-11-21 12:13:15"
    },
    {
        "id": "21300",
        "album_id": "3",
        "full_url":...