vendredi 1 juillet 2016

Image list using ng-repeat change opacity of visible item

In my application I am displaying one list with images in it using ng-repeat.

+---------------------------------------------+
|   |           Previous Image 0         |    |
|   +------------------------------------+    |
|   +------------------------------------+    |
|   |                                    |    |
|   |            Current Image 1         |    |
|   |                                    |    |
|   +------------------------------------+    |
|   +----------------------------------- +    |
|   |             Next Image 2           |    |
+---------------------------------------------+

Code to display this list is as below:

<div ng-repeat="item in myImageArray">
   <img ng-src="{{item.url}}" id="image{{item.id}}">
</div>

What I want to achieve:
In the list I want to set the opacity of Previous Image 0 and Next Image 2 to 50%.
And opacity of Current Image 1 to 100%.

Basically the image that is visible should have opacity of 100% and rest of the images should have opacity of 50%.

Aucun commentaire:

Enregistrer un commentaire