如何在点击时弹出图像并显示弹出的所有图像

Question

我有一个网格视图，它将显示db中可用的图像列表。现在我需要一个onClick功能，当用户按下任何图像时会触发。当点击该特定图像时，同样应显示为弹出屏幕，在弹出屏幕上我需要左右两个按钮，然后移动以查看其他图像。

这里我的代码用于在gridview中显示图像列表：

<div ng-repeat="eventimgs in MediaURL">

    <div class="row"  ng-if="$even">

        <div class="col col-50"><img ng-src="{{MediaURL[$index]}}" style="width: 100%;height: 217px;object-fit: cover;" /></div>

        <div class="col col-50"><img ng-src="{{MediaURL[$index + 1]}}"style="width: 100%;height: 217px;object-fit: cover;"/></div>
    </div>

</div>

现在我该如何制作一个点击功能，该功能会弹出并显示其点击的图像的图像？然后在弹出屏幕中按向左和向右按钮跟随其他图像。