hookedScreenshotCard.php

<?php
    include_once __DIR__ . '/inc/browserSummary.inc.php';
    $hookedBrowserDetails = getHookedBrowserDetails($pdo, $_GET['browserId']);
?>

<?php
    if($hookedBrowserDetails) {
        echo '<img class="hookedScreenshot img-thumbnail bg-transparent border border-0" src="' . htmlspecialchars($hookedBrowserDetails['hooked_screenshot']) . '" alt="Hooked screenshot" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#hookedScreenshotModal">';
    }
?>

<div class="modal" id="hookedScreenshotModal" tabindex="-1" aria-labelledby="hookedScreenshotModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img id="modalImage" src="" alt="Full size screenshot" class="img-fluid">
            </div>
        </div>
    </div>
</div>

<script>
    document.querySelector('.hookedScreenshot').addEventListener('click', function () {
        const imgSrc = this.src;
        const modalImage = document.getElementById('modalImage');
        modalImage.src = imgSrc;
    });
</script>