Using pagination with images

Question

Alright so, a friend and I are trying to build a website. It gets pictures from two directories, and shows them in chronological order (the image name is a timestamp). We make a JSON object using PHP and have the following code:

<?php

$files = array();

$dir = opendir('./dir1');
while ($file = readdir($dir)) {
    if ($file == '.' || $file == '..') {
        continue;
    }

    $files[] = array('name'=>($file), 'tag'=>"tag1");

}

$dir = opendir('./dir2');
while ($file = readdir($dir)) {
    if ($file == '.' || $file == '..') {
        continue;
    }

    $files[] = array('name'=>($file), 'tag'=>"tag2");

}

usort($files,function($b,$a) {return strnatcasecmp($a['name'],$b['name']);});

header('Content-type: application/json');
echo json_encode($files);

?>

We have a javascript file that looks like this:

function PictureController2($scope, $http) {

    $http.get('pictest.php').success(function(data) {
        $scope.pictures = data;
    });

};

And it is handled by HTML to create a page that shows the images w/ a thumbnail and image name in a grid. Unfortunately, it is all on one page, and there eventually will be a large number of images, so we were looking into pagination. We found this nifty code on jfiddle from another thread, http://jsfiddle.net/2ZzZB/56/, but are having trouble integrating our code into that one. We're both new to AngularJS so we're not sure how to properly combine our program with theirs.

Answer 1

given:

$http.get('pictest.php').success(function(response) { 
    // this returns a promise, so you need to check the data
    $scope.pictures = response.data;
});

lets say your JSON returned is something like this:

$scope.pictures= {one: "/local/myimg1.jpg", two: "/local/someOther.jpg"}; // returned from service

then you can create a view which uses this $scope data

<div ng-repeat="(key, value) in pictures"> <!-- repeat a div of pictures; key from above example would be 'one' and 'two'-->
    <!-- here, ng-src uses the value from the JSON, the web address, and if it can't find that (an error), then defaults to a different address  -->
    <img height=100 width=200 ng-src="value" onerror="this.src = 'images/ImageNotAvailable.png';"/> 
</div>

now to add pagination, you have a few options, you can use ng-show, ng-hide, ng-if and filters to limit what is shown, or using the filter from the link you provided:

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

you can change the ng-repeat and div to the following:

<div ng-repeat="(key, value) in pictures | startFrom:currentPage*pageSize | limitTo:pageSize"">
    <img height=100 width=200 ng-src="value" onerror="this.src = 'images/ImageNotAvailable.png';"/> 
</div>

where $scope.currentPage and $scope.pageSize are defined in your controller as integers

---

Update

<div ng-repeat="picture in pictures | startFrom:currentPage*pageSize | limitTo:pageSize"">
    <img height=100 width=200 ng-src="picture.name"/> 
</div>