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 !


  • 7 Votes
    18 Posts
    59 Views

    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them.

    More importantly, if you reload the site, you’ll notice that the ranks are now icons.

    I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.

  • 6 Votes
    15 Posts
    48 Views

    No no, I said that in the sense that he told me it was simple ^^
    I was able to see that this was not the case by targeting the elements he had advised me.

  • 2 Votes
    12 Posts
    37 Views

    @DownPW looks good to me.

  • 0 Votes
    1 Posts
    45 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

  • 0 Votes
    2 Posts
    138 Views

    @pwsincd I think you can use userData.isAdmin = isAdmin; if I’m not mistaken - see
    https://community.nodebb.org/topic/15128/how-to-hide-whitelist-user-field-only-to-owner-or-admin?_=1648802303112 for an example

  • 4 Votes
    8 Posts
    2k Views
  • 1 Votes
    1 Posts
    127 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…

  • 1 Votes
    7 Posts
    247 Views

    On this site, I’ve added an animation (essentially, a link underline) that meant I needed to modify the Fancybox function. The new animation I mentioned above has an annoying artefact where it also applies on images where the fancybox class exists.

    This is not surprising, as the fancybox attribute adds a a href to all img tags. Based on this, it is necessary to add a noanimate class so that the link animation is not being applied. However, this isn’t such a simple affair. Due to the Lazy Load feature that NodeBB leverages, the images aren’t in the DOM until that specific chunk of data is loaded as the user scrolls through the post. To allow for this, we need to fire an event that selects each target image extension and then appends the existing classes with noanimate as desired. For this to work, we have to create a duplicate each function that uses the preexisting hook of action: posts.loaded.

    In usual cases of an entire page load, this could be quite greedy and have a significant impact on CPU cycles. Thankfully, the cost is in fact negated by the limited amount of data being pulled in each Ajax request using the post loaded feature.

    Below is the code I developed for that

    if (top.location.pathname !== '/login') { $(window).on('action:posts.loaded', function(data) { console.log("Loaded"); $(document).ready(function() { $('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate"); }); }); }); } if (top.location.pathname !== '/login') { $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { this.$('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('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, } ); }); }); }

    The specific CSS that defines the animated underline (which you can see for example by hovering over the usernames in each thread) is shown below - note how we exempt noanimate using the :not() class. Basically, apply this css to all a href except those that carry the appended class noanimate.

    It’s a bit of a bulldozer to break an egg, but it’s still efficient nonetheless.

    .content p a { position:relative; } .content p a:not(.noanimate):after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 1px; left: 0%; position: absolute; background: var(--link); transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } .content p a:hover:after { width: 100%; left: 0; }