Mohsen Nirouzad Mohsen Nirouzad - 4 months ago 31
AngularJS Question

Show a large-siize image when click on thumbnail and giving opacity

I think It's better that I explain like this:


  1. There is 6 small images on the page next to each other

  2. user clicks on one of them

  3. all of the 5 other images (except for image that user clicked) will have an opacity of 0.7

  4. A large version of image (the image that user has been selected) will shows. ( I have an img tag and the image src will replace the src of the tag )



Can you tell me how can I do that? I prefer using JavaScript and Angular JS, But if you need it, there's no problem if you use JQuery too. sorry for bad English. Thank you
Update: some user asked me what I tried... THis is my code and I know It will not work... that's why I'm asking this from you...

<!DOCTYPE html>
<html lang="fa-IR" data-ng-app="projects" data-ng-controller="projects_controller">
<!-- Website design by Mohsen_Nirouzad -->
<head>
<!-- Adding meta information -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Mohsen Nirouzad - http://AproZ.ir">
<!-- defining stylesheets DO NOT delete the bellow codes if you don't have enough knowledge of web design -->
<!-- I used w3data.min.js for javascript templating engine so you've to change the bellow information in script tag -->
<meta name="application-name" content="{{application_name}}">
<meta name="description" content="{{description}}">
<meta name="keywords" content="{{keywords}}">
<meta name="publisher" content="{{googleplus_url}}">
<meta charset="UTF-8">
<title>{{page_title}}</title>
<link rel="stylesheet" href="assets/css/app.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/w3rtl.min.css">
<script src="assets/js/angular.min.js"></script>
</head>
<body>
<div data-ng-include="'variables/sidenav.html'"></div>
<div style="margin-right:25%" class="w3-row-padding">
<div class="w3-col s6">
<div data-ng-include="'variables/logo1.html'"></div>
<div class="w3-row-padding">
<div class="w3-col">
<div class="w3-col s6">
<img src="{{img1}}" alt="{{img1_alt}}" title="{{img1_title}}"><br>
<img src="{{img2}}" alt="{{img2_alt}}" title="{{img2_title}}"><br>
<img src="{{img3}}" alt="{{img3_alt}}" title="{{img3_title}}">
</div>
<div class="w3-col s6">
<img src="{{img4}}" alt="{{img4_alt}}" title="{{img4_title}}"><br>
<img src="{{img5}}" alt="{{img5_alt}}" title="{{img5_title}}"><br>
<img src="{{img6}}" alt="{{img6_alt}}" title="{{img6_title}}">
</div>
</div>
</div>
<div>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
</div>
</div>
<div class="w3-col s6">

</div>
</div>
<div data-ng-include="'variables/footer.html'"></div>
<script>
var application = angular.module('projects',[]);
application.controller('projects_controller',function($scope){
$scope.description='Some Description',
$scope.keywords='key1,key2,key3',
$scope.application_name='Sarabon',
$scope.googleplus_url='#',
$scope.page_title='پروژه ها'
});
</script>
</body>

</html>

Answer

Use ng-click to set a scope variable like selectedImage which can be used in ng-class and ng-src for big image

// small image
<img ng-src="{{img1}}" 
     alt="{{img1_alt}}" 
     title="{{img1_title}}" 
     ng-click="selectImage(img1)"
     ng-class="{'low-opacity-class' : selectedImage && selectedImage != img1}}"

>
// big image
<img ng-if="selectedImage" ng-src="selectedImage ">

In controller:

$scope.selectedImage = null;
$scope.selectImage=function(img){
   $scope.selectedImage = img;
}