Image Chooser Angular
Image Chooser Angular
HTML
<body ng-app ng-controller="Ctrl">
<a ng-click="prevButton()" style="font-size: 160px;"><</a>
<img ng-src="{{availableImages[prevImage].src}}" ng-click="whatme(currentImage-1)"/>
<img ng-src="{{availableImages[currentImage].src}}" ng-click="whatme(currentImage)"/>
<img ng-src="{{availableImages[nextImage].src}}" ng-click="whatme(currentImage+1)"/>
<a ng-click="nextButton()" style="font-size: 160px;">></a>
<br/><br/>
currentImage: {{currentImage}}
</body>
CSS
img{max-width:200px;cursor:pointer;margin:1}
img:hover{box-shadow: 0px 2px 2px 2px lightblue;margin:0}
JavaScript
function Ctrl($scope) {
$scope.prevImage = 0;
$scope.currentImage = 1;
$scope.nextImage = 2;
$scope.availableImages = [
{
src: "https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-9-2-128.png"
},
{
src: "https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-10-3-128.png"
},
{
src: "https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-11-2-128.png"
}
];
$scope.whatme = function($index) {
alert('You have choosen image nr ' + $index)
}
$scope.nextButton = function() {
$scope.currentImage++;
$scope.prevImage++;
$scope.nextImage++;
if ($scope.currentImage > ($scope.availableImages.length - 1)) {
$scope.currentImage = 0;
}
if ($scope.prevImage > ($scope.availableImages.length - 1)) {
$scope.prevImage = 0;
}
if ($scope.nextImage > ($scope.availableImages.length - 1)) {
$scope.nextImage = 0;
}
}
$scope.prevButton = function() {
$scope.currentImage--;
$scope.prevImage--;
$scope.nextImage--;
if ($scope.currentImage < 0) {
$scope.currentImage = ($scope.availableImages.length - 1);
}
if ($scope.prevImage < 0) {
$scope.prevImage = ($scope.availableImages.length - 1);
}
if ($scope.nextImage < 0) {
$scope.nextImage = ($scope.availableImages.length - 1);
}
}
}