Skip to content

[SOLVED] Fancybox doesn't work in chat

Bugs
  • For those of you using Fancybox, you’ve probably noticed that it doesn’t seem to work in Chat since the upgrade to v3. Looking at the function, it’s pretty obvious why

    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 function above targets a href where in fact, in the chat window, it doesn’t exist - it’s just an img tag

    6e601da6-93a0-44a0-b49f-d1a78e589804-image.png

    Not very helpful, so I will need to modify this function. I’ll advise as soon as I have it working in case you want to use on your own forums 🙂

  • Ok, this will work. Chats are now handled differently, so the two below functions need to be added to your custom js

    // 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,
                    }
                );
        });
    });
    
  • 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,
                    }
                );
        });
    });
    
  • phenomlabundefined phenomlab forked this topic on
  • DownPWundefined DownPW referenced this topic on

  • 3 Votes
    5 Posts
    160 Views

    @crazycells Agreed. It takes a more sensible approach. Nobody ever upvotes the first post - it’s usually much further down as the conversation progresses.

  • 6 Votes
    13 Posts
    102 Views

    @phenomlab yes, search page is fixed 🙂 thanks 👍

  • nodebb error logs

    Bugs
    6
    4 Votes
    6 Posts
    189 Views

    I just wanted to ask because I don’t have much knowledge about the new installation.
    Thank you for the explanatory answer.

  • Is NTFY working properly on iOS?

    Bugs
    10
    5 Votes
    10 Posts
    393 Views

    @phenomlab thx, the same for us. It sees 1.7.3 as the last version although it is updated to 1.7.4… i will report this to @barisusakli

  • 20 Votes
    49 Posts
    2k Views

    @cagatay Those are in /admin/extend/widgets/brand header. Look inside the HTML widget that is there, and you’ll find

    <div class="socialicons"> <a class="btn-ghost p-2" href="https://github.com/phenomlab" rel="noreferrer noopener"><i style="color: #333;background: #ffffff; width: 26px" class="fa fa-2x fa-github-square"></i></a> <a class="btn-ghost p-2" href="https://linkedin.com/in/phenomlab" rel="noreferrer noopener"><i style="color: #0077B5;background: #ffffff; width: 26px" class="fa fa-2x fa-brands fa-linkedin-square"></i></a> <a class="btn-ghost p-2" href="https://twitter.com/phenomlab" rel="noreferrer noopener"><i style="color: #1DA1F2;background: #ffffff; width: 26px" class="fa fa-2x fa-twitter-square"></i></a> <!-- <a class="btn-ghost p-2" href="https://www.facebook.com/sudonixtech" rel="noreferrer noopener"><i style="color: #4268B2;background: #ffffff; width: 26px" class="fa fa-2x fa-facebook-square"></i></a> --> </div>

    Remove that block and save.

  • Permission issues

    Solved Bugs
    8
    2 Votes
    8 Posts
    227 Views

    @Panda I forked this topic out of the previous thread as it’s an issue in it’s own right. Having checked, I see the reason why

    06d082f0-6c7d-443b-98bc-94db5f3e5d0e-image.png

    As you can see from the screenshot, category “Announcements” does not permit editing. This specific category was originally read only, which I then changed to members could reply. Looks like I forgot to add the right to edit 😕

    Should be fixed now

    a533d8ff-23f1-432e-a4a6-3d10cb05a46d-image.png

  • 2 Votes
    12 Posts
    376 Views

    @DownPW looks good to me.

  • 6 Votes
    16 Posts
    721 Views

    And it seems to be less conflicting!