圖像縮略圖

-5

你好我工作在網頁上，並希望我的產品展現給客戶有點像這個圖像縮略圖

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

我要顯示我的形象和所有其他變體產品圖像將在更大的圖像下顯示，以及所有這些效果。有人能告訴我如何實現這一目標嗎？感謝

來源

2015-06-25 Abhinav Pandey

你到目前爲止嘗試過什麼嗎？請將您已有的所有代碼添加到您的問題中，以便我們爲您提供幫助。 –

這是一個插件，可能會幫助你：http://www.starplugins.com/cloudzoom/examples –

我已經嘗試過，但無法做到這一點。 –

這是我會怎麼做：

小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

PS：你應該自己先嚐試一下，詢問下一次之前或將繼續趴下投像你這樣到目前爲止，這個時候雖然我沒有給你下投票。 :)

來源

2015-06-25 22:16:42

我認爲那只是不成熟。變得真實，沒有任何理由讓我對他給出他所要求的答案給予他冷落。有些人是傻瓜。 –

爲什麼這些人在進行投票前沒有找到並解釋自己的問題？根本沒有理由給我的答案或我的代碼投票。這兩個都是OP要求的，並且在要求的語言中......任何人都在意解釋？爲什麼人們竟然會投票並隱藏起來？ –

meta.stackoverflow.com/questions/272422/is-it-ok-to-answer-downvoted-questions ....那麼爲什麼讓downvote正確答案？一個管理員應該扯掉無緣無故的人，他們沒有權利這樣做。 –

回答

相關問題