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 !


  • 19 Votes
    35 Posts
    2k Views

    @DownPW said in Threaded chat support for NodeBB:

    Better like this : add shadow and border-left on self answer

    Of course - you style to your own requirements and taste 🙂 I’ll commit that CSS we discussed yesterday also

  • 3 Votes
    5 Posts
    488 Views

    @DownPW it’s possible, yes, but you may inadvertently end up targeting other elements using the same class which of course isn’t desired.

    Can you provide a link in DM for me to review?

  • 2 Votes
    12 Posts
    328 Views

    @DownPW looks good to me.

  • 4 Votes
    3 Posts
    161 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, } ); }); });
  • 0 Votes
    1 Posts
    117 Views
    No one has replied
  • 1 Votes
    2 Posts
    605 Views

    @eveh Welcome board 🙂

    The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps

    Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; }

    Note, that you will need to adjust your CSS code to suit your own site / requirements.

  • 0 Votes
    5 Posts
    762 Views

    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?

  • 24 Votes
    112 Posts
    12k Views

    @DownPW as discussed in PM

    Seems to have been solved with the new JS code that you added allowing the version CSS file change!!

    Cache problem therefore with the JS of the Switcher theme

    Based on this, I will close this thread and reference
    https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27