CODEWITHSUNDEEP
htmlcssangularjs
Shirley Truffier-Blanc
Shirley Truffier-Blanc

Reputation: 99

how we can display an active thumbnail in color when this one is active with AngularJS?

In this project, I have 4 pictures at the top of the web page, they are my thumbnails. When I click on one of this picture I want it to appear in color, and this color stays on the picture until we click on an other picture. During this time the others pictures are in black and white. I did this exercise with AngularJS, and I don't know where I can put this kind of property in my code, can you help me please?

The picture of want I want to obtain for the project : picture of the project

The code 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%;
}

Upvotes: 0

Views: 281

Answers (1)

Michael Abeln
Michael Abeln

Reputation: 2587

In my personal experience, you'll want to use the CSS property filter: grayscale(100%) to make your thumbnails appear without color. There's numerous ways to implement this with the same end result, but here is a link to a js fiddle that demonstrates the concept:

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

To Explain what is happening in the JS Fiddle:
Basically this demo is using the ng-click directive to add an .image-active class to an element with a base class of .image.

Here is what those classes look like:

.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%);
}

The base class of .image is using filter: grayscale(100%) to initially set the images to have no color. The .image-active class is added to the element when the click event happens, overriding the grayscale filter to filter: grayscale(0%) and adding color. Then existing.image-active` class is removed.

I wasn't sure based on your question if you wanted the first image to be active by default, or if you wanted them all gray to start, so I took a liberty there but I'm happy to update that for you.

Note: This example isn't using images, just <div> tags with background colors applied. But if you simply remove the color and add in your background images then it should work for you.

To Explain Further:
It's much easier and faster to add/remove a CSS property or class than it is to swap out an image source file based on application state. This gets even easier when using the ng-repeat and ng-class directives provided by angular, here is a link to the documentation:

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

Hope this helps!

Upvotes: 1

Related Questions