Как мы можем отобразить активный эскиз в цвете, когда этот активен с AngularJS? - PullRequest
Новая
       2

Как мы можем отобразить активный эскиз в цвете, когда этот активен с AngularJS?

0 голосов
/ 14 сентября 2018

В этом проекте у меня 4 картинки вверху веб-страницы, они мои миниатюры.Когда я нажимаю на одно из этих изображений, я хочу, чтобы оно отображалось в цвете, и этот цвет остается на изображении, пока мы не нажмем на другое изображение.В течение этого времени другие фотографии в черно-белом.Я выполнил это упражнение с AngularJS, и я не знаю, где я могу поместить такого рода свойства в свой код, не могли бы вы мне помочь?

Картинка желания, которую я хочу получить для проекта: picture of the project

Код проекта: 

    <!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link href="style.css" rel="stylesheet">
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="thumbnail">
    <img ng-click="changeName1()" ng-src="{{firstname1}}"  >
    <img ng-click="changeName2()" ng-src="{{firstname2}}" >
    <img ng-click="changeName3()"ng-src="{{firstname3}}" >
    <img ng-click="changeName4()"ng-src="{{firstname4}}" >
    <h1>{{title}}</h1>
</div>
    <div class="backgroundpicture">
        <img ng-src="{{src}}">
    </div>
    <div class="foregroundpicture">
        <img ng-src="{{src2}}">
    </div>   
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname1 = "photoshop-logo.jpg";
    $scope.firstname2 = "autocad-logo.png";
    $scope.firstname3 = "counterstrike-logo.png";
    $scope.firstname4 = "leagueoflegends-logo.jpg";


    $scope.src = "photoshop-screenshot.png";
    $scope.src2 = "photoshop-profile.PNG";
    $scope.title = "Photoshop";
    $scope.firstnamedisplay =$scope.firstname1;

    $scope.changeName1 = function() {
        $scope.firstnamedisplay =$scope.firstname1;
        $scope.src = "photoshop-screenshot.png";
        $scope.src2 = "photoshop-profile.PNG";
        $scope.title = "Photoshop";

    }
    $scope.changeName2 = function() {
        $scope.firstnamedisplay =$scope.firstname2;
        $scope.src = "autocad-screenshot.png" ;
        $scope.src2 = "autocad-profile.png";
        $scope.title = "Autocad";

    }
    $scope.changeName3 = function() {
        $scope.firstnamedisplay =$scope.firstname3;
        $scope.src = "counterstrike-screenshot.jpg";
        $scope.src2 = "counterstrike-profile.png";
        $scope.title = "Counter-Strike";

    }
    $scope.changeName4 = function() {
        $scope.firstnamedisplay =$scope.firstname4;
        $scope.src = "leagueoflegends-screenshot.png";
        $scope.src2 = "leagueoflegends-profile.png";
        $scope.title = "League of legends";

    }

});
</script>

</body>
</html>

    body {
    margin: 5%;
}

.thumbnail>img{
    padding-left: 3%;
    padding-right: 3%;
}

.backgroundpicture >img {
    padding-top: 7%;
    z-index:1;
    width: 90%;

}

.foregroundpicture >img  {
    position:absolute;
    z-index: 2;
    width: 55%;
    left:40%;
    top:65%;
}

1 Ответ

0 голосов
/ 15 сентября 2018

По моему личному опыту, вы захотите использовать свойство CSS filter: grayscale(100%), чтобы миниатюры отображались без цвета. Существует множество способов реализовать это с одним и тем же конечным результатом, но здесь есть ссылка на скрипту js, которая демонстрирует концепцию:

https://jsfiddle.net/s3pLef9c/47/

Чтобы объяснить, что происходит в JS Fiddle:
В основном, эта демонстрация использует директиву ng-click для добавления класса .image-active к элементу с базовым классом .image.

Вот как эти классы выглядят: 

.image{
  margin: 8px;
  display: inline-block;
  box-sizing: border-box;
  width: 20%;
  height: 100px;
  border: 8px solid #2c2c2f;
  background-color: #FEC10D; // change this to background-image or add an <img> tag inside the <div> tag and remove this line!
  filter: grayscale(100%);
}

.image-active{
  filter: grayscale(0%);
}

Базовый класс .image использует filter: grayscale(100%), чтобы изначально настроить изображения на отсутствие цвета. Класс .image-active добавляется к элементу, когда происходит событие щелчка, переопределяя фильтр оттенков серого на класс filter: grayscale(0%) and adding color. Then existing .image-active`.

Я не был уверен, основываясь на вашем вопросе, хотите ли вы, чтобы первое изображение было активным по умолчанию, или если вы хотите, чтобы все они были серыми, чтобы начать, поэтому я взял на себя смелость, но я рад обновить это для вас .

Примечание. В этом примере не используются изображения, только теги <div> с примененными цветами фона. Но если вы просто удалите цвет и добавите фоновые изображения, это должно работать для вас.

Чтобы объяснить дальше:
Добавить / удалить свойство или класс CSS намного проще и быстрее, чем заменить исходный файл изображения в зависимости от состояния приложения. Это становится еще проще при использовании директив ng-repeat и ng-class, предоставляемых angular, вот ссылка на документацию:

https://docs.angularjs.org/api/ng/directive/ngClass

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...