试图让图像库中的图像在点击上展开

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/