クリックで拡大する画像のギャラリーに画像を取得しようとしています

Question

選択した画像をギャラリーに展開しようとしました。私は拡大作業がありますが、それはセットの最初のイメージでのみ機能します。私はセット内の別の画像をクリックすると最初の一つはここに私の角のjsコード

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); 
    }); 
}); 

任意のヘルプは素晴らしいだろうだ

<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> 

を展開しますです！

Answer 1

<img id="view{{$index}}" ng-click="zoom($index)" ng-src={{photo.url}}> 

各IMGタグの一意イメージIDがパラメータとして関数に

$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"; 
     } 

} 

のインデックスを渡し、HTTPリクエスト

Answer 2

の側面をズーム機能を出すしますこのディレクトリを試すことができます。このコードをコピーしてstyle.cssのapp.jsと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%; 
} 

ソース：https://jsfiddle.net/kmturley/jwtj57kt/