使用显示MySQL图像的弹出窗口中的向后/向前按钮进行导航？

Question

我有一个页面，里面装满了从MySQL表中提取的图像。单击其中一个图像时，会出现一个模态弹出窗口。这个模态窗口包含向后和向前按钮，如下所示：

我希望能够使用这些按钮迭代MySQL图像。

这是获取图像并在页面上显示它们的PHP代码：

<div id="screenings">

<?php
    ...
    //connect to database & table
    ...
    while ($row = mysqli_fetch_array($result)){?>
        <div class='img_div' ng-click="vm.openModal('custom-modal-1')">
             <img class='modal_img img_screenings' src='images/<?php echo $row['image']."' >";
            echo "<p id='movie_p' align='center'>" .$row['title']."</p>";
            echo "<p id='screenings_p' align='center'>" .$row['year']."</p>";
            echo "<p id='location_p' align='center'>" .$row['duration']."</p>";
        echo "</div>";
     }
 ?>

 </div>

我是否需要获取$row['id']并将其存储在隐藏变量中，然后使用它来前后迭代？或者是否可以使用next-child previous-child函数进入某个地方？ jQuery将是一个首选的解决方案，因为这个页面底部有一些jQuery脚本，但我对任何想法持开放态度。

编辑或者我可以将图像文件路径存储在数组中，因为我将它们从MySQL表中提取出来？我怎么能这样做？