Angular PAGING: Thumbs with Overlay + Bootstrap

Angular Thumbs with Overlay + Bootstrap - Andrew Pougher

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div ng-controller="MyCtrl">
    <div class="container">
        <ul class="gal-1">
            <li class="box" ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">
                <img src="http://placehold.it/200/{{item}}4354{{item}}" class="img-responsive"> 
                    <a class="overlay" href="#">
				<h3 class="title lead">Some title {{item}}</h3>
				<div class="description">
					<p>
						Lorem ipsum dolor sit amet, <br>
						consectetur adipisicing elit.
					</p>
				</div>
			</a>

            </li>
        </ul>
    </div>
    <div class="text-center well well-sm paging">
        <button class="btn btn-md btn-default" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>{{currentPage+1}}/{{numberOfPages()}}
        <button class="btn btn-md btn-default" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">Next</button>
    </div>
</div>

CSS

body {
    background:#eee
}
.box {
    float:left;
    display:inline-block;
    margin:5px;
    border:3px solid #fff;
}
.gal-1 li {
    -moz-transition:all 0.6s ease;
    -webkit-transition:all 0.6s ease;
    -ms-transition:all 0.6s ease;
    -o-transition:all 0.6s ease;
    transition:all 0.6s ease;
    opacity:0.8;
    webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
.gal-1 li:hover {
    -moz-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    -o-transform:scale(1.2);
    -ms-transform:scale(1.2);
    transform:scale(1.2);
    z-index:2;
    opacity:1;
    -moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
    box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}
.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    text-decoration: none;
    color: #fff;
    display: none;
}
.overlay .title {
    text-align: center;
    font-size: 30px;
    color:white;
    text-decoration:none
}
.overlay .description {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.80);
    width: 100%;
    margin: 0;
    color:white;
}
.overlay .description p {
    margin: 20px;
}
.gal-1 li:hover .overlay {
    display: block;
}
.paging {
    position: fixed;
    z-index:200;
    top:1px;
    width:100%;
    background-color:rgba(255, 255, 255, 0.5)
}
@media screen and (max-width: 480px) {
    .description {
        font-size: 9px;
    }
    .overlay h3.lead {
        font-size: 16px;
    }
}

JavaScript

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

function MyCtrl($scope) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.numberOfPages = function () {
        return Math.ceil($scope.data.length / $scope.pageSize);
    }
    for (var i = 0; i < 45; i++) {
        $scope.data.push(i);
    }
}

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function () {
    return function (input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});