[Solved] Image thumbnail in product images [closed]

by


This is how I would do it:

A little 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%;
}

Jade markup

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

Heres the finished product:

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

0

solved Image thumbnail in product images [closed]