Javascript 如何在单击图像时显示弹出窗口并在该弹出窗口中显示所有图像

我有一个网格视图，它将以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>

---

现在，我如何制作一个点击功能，它将显示弹出窗口，并显示其点击的图像？然后按弹出屏幕中的左右按钮显示其他图像。

使用ionic模式-我是ionic新手。如果你解释一下该怎么做，那将是完全有帮助的。。例如，我需要设计新屏幕以全屏显示图像。按钮位于右侧和左侧。我对吗？使用fancybox：