Angular Assignment 1

Create a page that has an array of paths of image The image in the first position of array (0 index) is loaded place 2 buttons ('Next' & 'Previous') on clicking 'Next' button the next image from the array should be loaded on clicking 'previous' the previous button from the array should be loaded when there is no next image then the next button should be disabled when there is no previous image then the previous button should be disabled

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<div ng-app='myApp' ng-controller='myController'>
    <img class="displayed" src="{{images[currentImage]}}" />
    <br>
    <span ng-click="showPrevious()" ng-class="{ 'enabled': leftButtonEnabled, 'disabled': !leftButtonEnabled }" class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
    <span ng-click="showNext()" ng-class="{ 'enabled': rightButtonEnabled, 'disabled': !rightButtonEnabled }" class="glyphicon glyphicon-triangle-right" style="float:right;" aria-hidden="true"></span>
        <ul class="thumbnails">
            <li ng-click="thumbnailClicked($index)" ng-repeat="image in images"><img class="" ng-class="{'selected':$index === currentImage}" src="{{image}}" /></li>
        </ul>
</div>

CSS

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

.enabled{
    cursor:pointer;
}

.disabled{
    opacity: 0.4;
    cursor:default;
}

ul.thumbnails {
    display:block;
    list-style-type: none;
}

ul.thumbnails img.selected {
    border-color:blue!important;
}


ul.thumbnails img {
    width:60px;
    height:40px;
    padding:5px;
    display:inline;
    border:solid;
    border-width:1px;
    border-color:black;
}
ul.thumbnails li {
    display:inline;
}

JavaScript

var myApp = angular.module('myApp',[]);
myApp.controller('myController', function($scope){
    $scope.currentImage = 0;
    $scope.leftButtonEnabled = false;
    $scope.rightButtonEnabled = true;
	$scope.images = ['http://www.photographyblogger.net/wp-content/uploads/2013/07/19-Andes-Mountains.jpg',
'http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1',
'http://www.paddydillon.co.uk/static/files/8_600~600.jpg',
'http://www.jimnaglephotography.com/Landscape%20slide%20show/data/images1/the_galtee_mountains_092.jpg',
'http://www.feargod.net/img-snow/wwsdn31.jpg',
'https://wicklowmountainstour.ie/wp-content/uploads/2015/10/guinness-lake.jpg',
'http://www.canadaphotos.info/images/600/mountain-scenery-602.jpg',
'http://www.canada-photos.com/images/600/mountain-peaks-6832.jpg'];
    var lastIndex = $scope.images.length - 1;
    var firstIndex = 0;
    
    $scope.thumbnailClicked = function(index){
    	$scope.currentImage = index;
        updateNavState();
    }
    
    $scope.showPrevious = function(){
    	if($scope.leftButtonEnabled === false){
        	return;
        }
        $scope.currentImage--;
        updateNavState();
    }
    
    $scope.showNext = function(){
    	if($scope.rightButtonEnabled === false){
        	return;
        }
        $scope.currentImage++;
        updateNavState();
    }
    
    function updateNavState (){
    	if($scope.currentImage <= firstIndex){
         	$scope.leftButtonEnabled = false;
        }else{
        	$scope.leftButtonEnabled = true;
        }
        
        if($scope.currentImage >= lastIndex){
         	$scope.rightButtonEnabled = false;
        }else{
        	$scope.rightButtonEnabled = true;
        }
    }
});