Issue
Hello I am working on a web page and would like to show my product to the customers somewhat like this
http://store.americanapparel.net/french-terry-s-s-kangaroo-pullover-hoody_fs424
I want my image to be shown and all other variants of the product image to be shown under the bigger image and all the effects as this. Can someone tell me how to achieve this? thanks
Solution
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
Answered By - AlphaG33k
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.