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 !


  • 1 Votes
    1 Posts
    42 Views

    I thought I had already created a dedicated thread for this elsewhere, but clearly not - it was probably bundled in with another topic.

    If you want to create an “Author” badge on each post that looks like the below, you can do this using pure CSS

    d983d994-c4b6-4063-ae1e-74bba88d75b5-image.png

    Required CSS

    .topic-owner-post [itemprop=name]:after { border: 2px solid var(--bs-border-color); border-radius: 0.25rem !important; color: var(--bs-body-color); content: "Author"; margin-left: 5px; padding: 2px 10px; display: inline-block; }

    However, things get slightly more complicated if you want to add an icon in the same element, like the below

    a81318a0-a15c-45f1-94f7-ee17a1931433-image.png

    As the above example makes use of the :after pseudo element, it’s not possible to have two font-family statements when using content: ""

    To facilitate this, you’d need a jQuery function that looks like the below

    $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $(".topic-owner-post [itemprop=name]").append("<span class='author'><span class='author-icon'><i class='fa-light fa-bullhorn'></i>Author</span>"); }); });

    Here, you use span tags to insert both the icon, and text 🙂

    Obviously, you need to ensure that the css for .author and .author-icon exist.

    Here’s an example

    span.author { border: 2px solid var(--bs-border-color); border-radius: 0.25rem !important; color: var(--bs-body-color); content: "Author"; margin-left: 5px; padding: 2px 10px; display: inline-block; } span.author-icon i { margin-right: 5px; }
  • 2 Votes
    12 Posts
    104 Views

    @DownPW looks good to me.

  • NodeBB v3 Vote Icon

    Solved Customisation
    9
    2 Votes
    9 Posts
    42 Views

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

  • 0 Votes
    1 Posts
    59 Views

    Hi all,

    If you’re coming back here after a short hiatus, then you’ll notice that sudonix has now been upgraded to v3. There’s a lot of things that have changed - including new swatches, and a smart “drawer like” categories selector.

    I’ve also developed new code which has been running in dev for what seemed like a lifetime, but is now actively running here.

    Feel free to wander around and explore the new layout. I hope you enjoy using it as much as I already do.

    Thanks

  • 1 Votes
    2 Posts
    240 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.

  • 5 Votes
    9 Posts
    1k Views

    @phenomlab

    Very very great Mark 😉
    Thanks again, It’s perfect now !

    –> I share my code that I modified.

    I’ve added French and English comments.
    If you see things to change Mark, don’t hesitate.

    As usual, all the access paths (FA icons, logo) will have to be modified according to your architecture.

    You can also very well add/remove time slots and change welcome messages to suit your needs.

    Widgets ACP/HTML Widget Footer Logo <center> <br><br> <img id="thislogo" src="path/to/my/image"> </center> Widget Welcome Message <!-- IF loggedIn --> <div class="getUsername">, <a href="/me"><span class="username"></span></a></div> <!-- ENDIF loggedIn --> CSS

    – I added the size font-weight: 900; in the CSS because otherwise some FA icon wasn’t displayed correctly and reduce margin :

    i#thisicon { font-family: "Font Awesome 5 Free"; font-style: normal; margin-right: 8px; font-weight: 900; } .getUsername { padding-top: 20px; text-align: right; } /*Smartphone*/ /*On désactive le message de bienvenue"*/ /*We disable the welcome message"*/ @media all and (max-width: 1024px) { .getUsername { display: none; } } JAVASCRIPT // ------------------------------------------ // Welcome Message avec icône et Footer logo // Welcome Message with icon and Footer logo // ------------------------------------------ $(window).on('action:ajaxify.end', function (data) { //On récupère le username dans le DOM et on l'affiche //We retrieve the username from the DOM and display it function updateUsername() { $('.getUsername .username').text(app.user.username); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', updateUsername); } else { updateUsername(); } //On déclare les variables principales (themessage & thehours) ainsi que les variables secondaires correspondants aux plages horaires //We declare the main variables (themessage & thehours) as well as the secondary variables corresponding to the time slots var thehours = new Date().getHours(); var themessage; var wakeup = ('Good day'); var morning = ('Good morning'); var lunch = ('Bon appétit'); var afternoon = ('Good afternoon'); var drink = ('Cheers'); var evening = ('Good evening'); var night = ('Good night'); var welcome = ('Welcome'); var matched = false; //On peux ici tester le résultat du code en spécifiant une heure (!!!IMPORTANT: Commenter une fois le script testé!!!) //Here we can test the result of the code by specifying a time (!!!IMPORTANT: Comment once the script has been tested!!!) //thehours = 20 //On déclare les plages horaires avec les icones FA et les logos //We declare the time slots with FA icons and logos path if (thehours >= 0 && thehours < 6) { themessage = night; theicon = "fa-solid fa-moon"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 6 && thehours < 8) { themessage = wakeup; theicon = "fa-solid fa-mug-hot"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 8 && thehours < 12) { themessage = morning; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 12 && thehours < 13) { themessage = lunch; theicon = "fas fa-hamburger"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 13 && thehours < 16) { themessage = afternoon; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 16 && thehours < 18) { themessage = welcome; theicon = "fa-solid fa-rocket"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 18 && thehours < 19) { themessage = drink; theicon = "fa-solid fa-wine-glass"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 19 && thehours < 20) { themessage = lunch; theicon = "fas fa-pizza-slice"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 20 && thehours < 24) { themessage = evening; theicon = "fa-solid fa-tv"; thelogo = "/assets/customlogo/XXX.png"; } // Si la page active est un topic, on désactive/cache le message de bienvenue // If the active page is a topic, we deactivate/hide the welcome message if (window.location.href.indexOf("topic") > -1) { console.log("This is a topic, so hide the user welcome message"); $('#thisuser').hide(); } // Sinon, on affiche le message en fonction, l'icone FA et son emplacement (prepend) // Otherwise, we display the message in function, the FA icon and its location (prepend) else { $('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage); $("#thislogo").attr("src", thelogo); //$('.getUsername').prepend("<img id='thisicon' src='" + thelogo + "'></>" + themessage); } });
  • 1 Votes
    1 Posts
    138 Views

    Looking at the pre and code blocks today I realised how difficult they are to read when you switch from light to dark / dark to light mode. Can’t have that ! I’ve now fixed this so that it looks the part when viewed in either mode.

    As code / markup is used extensively here, it’s important we get it right 🙂

    Thought and opinions welcomed…

  • 6 Votes
    16 Posts
    337 Views

    And it seems to be less conflicting!