Skip to content

Want to include Fancybox in NodeBB without a plugin?

Customisation
  • 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>
    
    1. 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 !

  • phenomlabundefined phenomlab marked this topic as a regular topic on
  • @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 😉

  • @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/

  • 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

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

  • @phenomlab

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

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


  • 3 Votes
    2 Posts
    138 Views

    @phenomlab very nice and useful idea

    Bravo Xd GIF

  • 4 Votes
    3 Posts
    163 Views

    EDIT: Sorry all, I found a bug that causes Fancybox to be bound twice.

    Please remove the original functions I provided (the original post has been updated for anyone who did not use the original code and is new here) and replace with just this block

    // Chat fancybox - fires when chat module loaded and AJAX calls new chat $(document).ready(function() { $(window).on('action:chat.loaded', function(data) { this.$('img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { var newHref = $(this).attr("src"); $(this).wrap("<a class='fancybox' href='" + newHref + "'/>"); $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate"); data.preventDefault(); // 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, } ); }); });
  • NodeBB v3 Vote Icon

    Solved Customisation
    9
    2 Votes
    9 Posts
    446 Views

    @phenomlab forget it, look likes good with your codes.

  • 0 Votes
    2 Posts
    456 Views

    @mventures said in NodeBB: Consent policy popup:

    How did you implement this consent pop-up?

    This is located in /admin/settings/cookies

    @mventures said in NodeBB: Consent policy popup:

    Does it appear every new day for a user who has accepted it?

    No. It places a cookie on the machine of the user who visits the site, and once they accept it, it doesn’t appear again unless you select

    0bda6e07-efca-4039-a132-c94060a6fec4-image.png

  • 0 Votes
    9 Posts
    803 Views

    @downpw I’m inclined to agree with this. There isn’t much else you can do, and provided it works with no odd looking artefacts in other browsers, then ok. The :before and :after are pseudo classes and very well supported across all browsers (except perhaps Internet Exploder, but who uses that these days ?)

  • 4 Votes
    25 Posts
    2k Views

    Topic open
    https://sudonix.com/topic/207/nodebb-help-for-my-custom-css

  • Display tweets in widget [NodeBB]

    Solved Customisation
    29
    4 Votes
    29 Posts
    2k Views

    @phenomlab brilliant, many thanks Mark 😁

  • 0 Votes
    3 Posts
    678 Views

    @phenomlab many thanks Mark 😁.