产品图像中的图像缩略图

Image thumbnail in product images

本文关键字：图像 略图      更新时间：2023-09-26

你好，我正在开发一个网页，我想向客户展示我的产品，有点像这个

http://store.americanapparel.net/french-terry-s-s-kangaroo-pullover-hoody_fs424

我希望我的图像被显示出来，产品图像的所有其他变体都被显示在更大的图像下，以及所有的效果。有人能告诉我如何做到这一点吗？感谢

我会这样做：

AngularJs

var demo = angular.module('demo', []);
demo.controller('demoCtrl', function($scope) {
  $scope.imgs = {};
  $scope.imgs.a = {
    'small': 'http://placehold.it/150x150/000000',
    'large': 'http://placehold.it/500x500/000000'
  };
  
  $scope.imgs.b = {
    'small': 'http://placehold.it/150x150/cccccc',
    'large': 'http://placehold.it/500x500/cccccc'
  };
  
  $scope.imgs.c = {
    'small': 'http://placehold.it/150x150/ffffff',
    'large': 'http://placehold.it/500x500/ffffff'
  };
  
  $scope.viewShowing = $scope.imgs.a.large;
  
  $scope.applyNewLargeView = function(largeViewUriString){
   $scope.viewShowing = largeViewUriString; 
  }
});

CSS

* {
  padding: 0;
  margin: 0;
}
.container {
  width: 500px;
}
.main,
.sub {
  display: block
}
.main > img {
  width: 100%;
}
.sub > img {
  width: 33%;
}

翡翠标记

main(ng-app="demo", ng-controller="demoCtrl", class="container")
  .main
    img(ng-src="{{ viewShowing }} ")
  .sub
    img(ng-repeat="img in imgs", ng-click="applyNewLargeView(img.large)" ng-src="{{ img.small}}")

这是成品：

http://codepen.io/nicholasabrams/pen/MwOMNR

相关文章：