Skip to content

Issues with Imgur images in Fancybox chat module

Bugs
  • This post is in relation to
    https://sudonix.com/topic/473/solved-fancybox-doesn-t-work-in-chat

    hmm yes that work for local image but for me, I have a imgur plugin for all my image uploaded on the forum with heberged on imgur website and the script open the link on new tab browser. It’s possible to change that and modify this script ?

    See the result with external link image :

    test3.gif

  • @DownPW hmm, yes, I see what you mean. Presently, the script uses a regex which is quite gratuitous and binds a href to the img tag.

    I don’t use imgur myself, but from memory, they use a common prefix in their url schema which we could then use to make this specific function a little more flexible and lenient.

    Do you have the script running in your test environment? I need to see some working examples.

  • @phenomlab said in [SOLVED] Fancybox doesn’t work in chat:

    Do you have the script running in your test environment? I need to see some working examples.

    yes

  • @DownPW Right, this is interesting. On your forum, I have adjusted the code so it looks like the below (this is a snippet of the overall function, so do not copy it)

            if (isFound) {
                this.$('img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                    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();
                });
                pattern = /assets/;
                exists = pattern.test(newHref);
                if (exists) {
                    console.log(newHref + " is a local resource and not subject to Fancybox");
                    return false;
                    // Do not trigger fancybox
                }
                else {
                Fancybox.bind(
                    'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]', {
                        groupAll: true,
                    }
                );
                }
            }
    

    Essentially, we are performing unit tests here in the sense that we first check the newly wrapped a href and see if it contains /assets/ - if it does, we issue return false; which basically means “don’t do anything” - if there isn’t a match, we proceed to issue fancybox.bind to other URL’s in the loop.

    Still working through this, but the behaviour is not what I expected. Are you using the imgur plugin?

  • @phenomlab

    On my production yes but I just realized that it was not installed on the dev instance.
    I just did it now 🙂

  • @DownPW I finally got to the bottom of this - see

    https://community.nodebb.org/topic/748/nodebb-plugin-imgur-imgur-plugin/89

    As you have the Imgur plugin enabled, this will override fancybox so there isn’t much I can do to circumvent this sadly.

    See this particular post from @julian

    3ae47ac1-1f5c-4e9b-a6f7-82d784af1890-image.png

  • yep @phenomlab but in fact, the imgur external link image open correctly with Fancybox on topics without problem

    Actually, this problem is just on the chat. It’s incomprehensible by the way, why it would be ok in the topics and not in the chat ? I confess I don’t understand well.

    But if there are no other solutions, I would enlarge the images to 100% only in the chat via CSS, that’s already what I did on V2 🙂

  • @DownPW Yes, I can actually replicate this very same experience. No matter what code I try, I can’t override this behaviour, which is just bizarre as it works fine in posts!!

  • yes, that’s for sure ^^
    But I don’t want to do without this plugin so I’ll do with it. I don’t want to host all the images on the forum

    thank you for trying something!

  • @DownPW I like a challenge, so I’ll keep trying. It’s just really odd to me.

  • @phenomlab

    While waiting for a solution (or not), here is my code to determine the size of images or gifs in the chat and in the posts

    It seems to work as it should.

    If you see errors Mark, do not hesitate to tell me or improve 🙂

    /* Appearance of images in posts */
    .topic .posts .content a > img.img-fluid.img-markdown, [component="post/content"] .img-fluid {
      padding: 8px;
      margin: 8px 0;
      border: 1px solid var(--bs-border-color);
      max-width: 80%;
    }
    
    /* Appearance of "GIF" images in posts */
    .topic .posts .content a > img.img-fluid.img-markdown[src$="gif"], [component="post/content"] .img-fluid[src$="gif"] {
      padding: 8px;
      margin: 8px 0;
      border: 1px solid var(--bs-border-color);
      max-width: 60%;
    }
    
    /* Appearance of images in Chat */
    .chat .message .content a > img.img-fluid.img-markdown, [component="chat/message"] .img-fluid {
      padding: 8px;
      margin: 8px 0;
      border: 1px solid var(--bs-border-color);
      max-width: 80%;
    }
    /* Appearance of "GIF" images in Chat */
    .chat .message .content a > img.img-fluid.img-markdown[src$="gif"], [component="chat/message"] .img-fluid[src$="gif"] {
      padding: 8px;
      margin: 8px 0;
      border: 1px solid var(--bs-border-color);
      max-width: 60%;
    }
    
  • @DownPW looks good to me.


Related Topics
  • Layout Issues/Transparency

    Solved Bugs
    5
    2 Votes
    5 Posts
    58 Views

    @phenomlab said in Layout Issues/Transparency:

    Does it work properly now?

    Yes, it does 🙂

  • Fancybox zoom

    Unsolved Customisation
    2
    0 Votes
    2 Posts
    57 Views

    @DownPW Technically, it should be possible with the addition of the below

    Toolbar: { display: { left: ["infobar"], middle: [ "zoomIn", "zoomOut", "toggle1to1", "rotateCCW", "rotateCW", "flipX", "flipY", ], right: ["slideshow", "thumbs", "close"], }, },

    Meaning your code block becomes

    function fancybox() { if (top.location.pathname !== '/login') { $(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"], a[href*=".svg"]').addClass("noanimate"); }); }); Fancybox.bind( 'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"], a[href*=".svg"]', { Toolbar: { display: { left: ["infobar"], middle: [ "zoomIn", "zoomOut", "toggle1to1", "rotateCCW", "rotateCW", "flipX", "flipY", ], right: ["slideshow", "thumbs", "close"], }, }, } ); } }

    Note, that you just need to add/remove the elements in the toolbar you do not need. Obviously, zoomIn and zoomOut are the ones you are specifically interested in. However, if Fancybox detects that the image has already been zoomed as far as possible, then this will not work. You’d need an external library such as zoom.js to add this functionality, or perhaps simpler

    https://www.jacklmoore.com/zoom/

    A good example of how you’d make these two independent libraries work together is below

    https://codepen.io/ezra_siton/pen/VgrjKw

    It’s worth nothing that this specific code is based on Fancybox 3, so may need to be refactored to work with the latest version 5.

  • 4 Votes
    7 Posts
    760 Views

    @phenomlab oh no, that is 1 cent on the video, but you are right, symbols are similar… I just converted it to $1 , since it is more intuitive in daily life…

  • Permission issues

    Solved Bugs
    8
    2 Votes
    8 Posts
    465 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

  • [SOLVED] Fancybox doesn't work in chat

    Bugs
    3
    4 Votes
    3 Posts
    353 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 Chat Very Slow

    Moved Performance
    47
    11 Votes
    47 Posts
    4k Views

    @DownPW Seems fine.

  • nodebb chat roll dice game

    Solved Customisation
    29
    5 Votes
    29 Posts
    3k Views

    @phenomlab said in nodebb chat roll dice game:

    @DownPW I still think you could do something much quicker with jQuery.

    Why not but like I said, I have no skills to do that.

    If you are motivated, why not but I don’t want to bother you especially since it will only be for a certain period of time.

  • 3 Votes
    6 Posts
    1k Views

    @phenomlab

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

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