Want to include Fancybox in NodeBB without a plugin?

[phenomlab]

That’s exactly what I wanted to do. You may have noticed that the images here are handled via Fancybox, and you can do the same with your own forum as follows

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 !

[DownPW]

@phenomlab

Oh yeah, it’s very good
I didn’t know Fancybox but I see that we can manage image galleries !

I would be interested in the sense that I use the light gallery plugin on NodeBB so as not to have posts with lots of images one below the other, but it is buggy.

How does displaying galleries work in a NodeBB post?

Great Post

[phenomlab]

@DownPW

I would be interested in the sense that I use the light gallery plugin on NodeBB so as not to have posts with lots of images one below the other, but it is buggy.

Yes, I saw that too. Plus, the latest version of Fancybox has no reliance on jQuery or other external libraries, so it’s much faster, and has a smaller footprint.

How does displaying galleries work in a NodeBB post?

Good question. It would be easy to extend the initial code in the first post by implementing some of the features on offer here

https://fancyapps.com/docs/ui/fancybox/

[DownPW]

what would be great is to have a carousel directly in a thread but in my opinion it is not simple !

https://fancyapps.com/docs/ui/carousel

[phenomlab]

@DownPW not simple, no, but certainly possible with a little “imagination”

[DownPW]

@phenomlab

haha!!
You are crazy. In a good way, of course

It’s a way of saying you’re awesome !