trying to get image in gallery of images to expand on click - angularjs

Question

Trying to get selected clicked image to expand in a gallery of images. I have the expanding working but it only works on the first image in the sets. If I click on another image in the set the first one is the one that gets expanded
<div ng-repeat="album in albumData|filter:q" id="thumbWrapper">
<h1>{{album.id}}</h1>
<h2 ng-click="showme = !showme">{{album.title}}</h2>
<div id="thumbList"ng-show="showme"class="albumContent">
<ul ng-controller="PhotoCtrl" id="thumbList">
<li ng-repeat="photo in photoData" ng-if="album.userId == photo.albumId">
<img id="view" ng-click="zoom()" ng-src={{photo.url}}>
</li>
</ul>
</div>
</div>
</div>
here's my angular js code
var app = angular.module('myApp', []);
app.controller('AlbumCtrl', function ($scope, $http) {
$http.get("http://jsonplaceholder.typicode.com/albums").then(function(response) {
$scope.albumData = response.data;
console.log($scope.albumData);
});
});
app.controller('PhotoCtrl', function($scope, $http) {
$http.get("http://jsonplaceholder.typicode.com/photos").then(function(response) {
$scope.photoData = response.data;
$scope.zoom = function() {
var imageId = document.getElementById('view');
if(imageId.style.width == "1000px"){
imageId.style.width = "600px";
imageId.style.height = "600px";
}else{
imageId.style.width = "1000px";
imageId.style.height = "1000px";
}
};
// console.log($scope.photoData);
});
});
any help would be awesome!

Answer 1

make the image id unique for each img tag
<img id="view{{$index}}" ng-click="zoom($index)" ng-src={{photo.url}}>
pass the index as parameter to the function
$scope.zoom = function(index) {
var elem = "view" + index;
var imageId = document.getElementById(elem);
if (imageId.style.width == "1000px") {
imageId.style.width = "600px";
imageId.style.height = "600px";
} else {
imageId.style.width = "1000px";
}
}
and put the zoom function out side of the http request

Answer 2

You can try this directory. Just copy and paste this code in the app.js and css code in style.css. But be careful, this applies to all images in your website
.directive('img', function ($window) {
'use strict';
function getElementOffset (element) {
var de = document.documentElement;
var box = element.getBoundingClientRect();
var top = box.top + window.pageYOffset - de.clientTop;
var left = box.left + window.pageXOffset - de.clientLeft;
return { top: top, left: left };
}
return {
restrict: 'E',
link: function (scope, element, attr) {
var expanded = false,
cloned = element.clone(true),
offset = getElementOffset(element[0]);
cloned.addClass('large');
cloned.attr('src', attr.src);
cloned.css('top', offset.top + 'px');
cloned.css('left', offset.left + 'px');
cloned.bind('click', function () {
if (expanded) {
cloned.removeClass('expanded');
expanded = false;
} else {
cloned.addClass('expanded');
expanded = true;
}
});
element.parent().append(cloned);
angular.element($window).bind('scroll', function () {
if (expanded) {
cloned.removeClass('expanded');
expanded = false;
}
});
}
};
});
CSS:
.app img {
display: block;
float: right;
width: 200px;
}
.app img.large {
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
cursor: zoom-in;
position: absolute;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.app img.expanded {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out;
left: 0 !important;
top: 0 !important;
width: 100%;
}
source: https://jsfiddle.net/kmturley/jwtj57kt/