1. Add the below into the ACP->Custom Header

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

2. Add the below into the ACP->Custom JS

// Fancybox wrapper

if (top.location.pathname !== '/login') {
    $(window).on('action:ajaxify.end', function (data) {
        this.$('img').not('.forum-logo').each(function () {
            // Strip out the images contained inside blockquotes as this looks nasty :)
            $('blockquote img').remove();
            Fancybox.bind(
                'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]',
                {
                    groupAll: true,
                }
            );
        });
    });
}

Note, that I included a check to exclude the login path

if (top.location.pathname !== '/login') {

The reason for this is that some of the SSO icons are actually images, so clicking these to login actually triggered Fancybox, which was not the desired effect.

if you aren’t using SSO or this particular issue doesn’t matter to you, you can change this to

    $(window).on('action:ajaxify.end', function (data) {
        this.$('img').not('.forum-logo').each(function () {
            // Strip out the images contained inside blockquotes as this looks nasty :)
            $('blockquote img').remove();
            Fancybox.bind(
                'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]',
                {
                    groupAll: true,
                }
            );
        });
    });

I also use the line

$('blockquote img').remove();

This strips the images from blockquotes - otherwise, they are simply duplicates. Again, if you actually want this behaviour, you can just remove this line.

Enjoy !