試圖讓圖像庫中的圖像在點擊上展開

Question

試圖讓選定的點擊圖像在圖像庫中展開。我有擴展的工作，但它只適用於集合中的第一個圖像。如果我點擊集中的另一個圖像上的第一個是被擴大

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

的一個，這裏是我的角度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); 
    }); 
}); 

任何幫助將是真棒！

Answer 1

使圖像ID唯一每個img標籤

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

的索引作爲參數傳遞給該函數

$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代碼即可。但要小心，這適用於所有的圖像在您的網站

.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%; 
} 

來源：https://jsfiddle.net/kmturley/jwtj57kt/