Navigate using backward/forward buttons on a pop-up window displaying MySQL images?

Question

I have a page filled with images pulled from a MySQL table. When one of these images is clicked, a modal pop-up window appears. This modal window contains backward and forward buttons, like this:

I would like to be able to iterate through the MySQL images with these buttons.

Here is the php code that grabs the images and displays them on the page:

<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>

Do I need to get $row['id'] and store it in a hidden variable, and use that to iterate backward and forward? Or is there maybe a next-child previous-child function I could tap into somewhere for this? jQuery would be a preferred solution since this page has some jQuery script at the bottom of it already, but I'm open to any ideas.

EDIT Or maybe I could store the image file paths in an array as I'm pulling them from the MySQL table? How could I do that?