Изображения как кнопки для открытия с использованием модальных окон

Я показываю изображения из своей базы данных. Галерея должна быть размером (n строк) x 3 столбца, где каждая сетка будет иметь небольшое изображение. По изображению нужно щелкнуть, и его большой размер должен отображаться в режиме начальной загрузки. Как мне это сделать? Не могу обойтись. На изображения можно нажимать, но никаких действий не происходит. Вот код, который я пробовал:

        $conn = new mysqli("localhost","root","","yomadsdata");
        $sql = "select * from photos";
        $result = $conn->query($sql);

        if ($result->num_rows > 0)
        {
            $c = 0;
            while($row = $result->fetch_assoc())
            {
                $path = $row["photo_path"];
                $image_id = $row["id"];
                echo "<button type='button' data-toggle='modal' data-target='#mymodal'>
                        <div id='photoframe'>
                          <img id='photoId' src='photos/$path' alt='$path'>
                        </div>
                      </button>";

                echo '
                <div class = "modal fade" id = "myModal" role = "dialog">
                  <div class = "modal-dialog">
                    <div class = "modal-content">
                      <img src = "photos/'.$path.'" alt = "'.$path.'" height = "300" width = "400">
                    </div>
                  </div>
                </div>';

                $c++;
                if ($c == 3)
                {
                    echo "<br>";
                    $c == 0;
                }
            }
        }
        else{
            echo "No photos in the database.";
        }

        $conn->close();