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,
    }
    );
    });
    });
  • undefined phenomlab forked this topic on 12 May 2023, 22:40
  • undefined DownPW referenced this topic on 12 May 2023, 22:43

1/3

11 May 2023, 11:55

Related Topics
  • 0 Votes
    2 Posts
    88 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.
  • 3 Votes
    5 Posts
    359 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.
  • 4 Votes
    6 Posts
    422 Views
    I just wanted to ask because I don’t have much knowledge about the new installation. Thank you for the explanatory answer.
  • Bug Report

    Solved Bugs 9 Nov 2023, 19:27
    +0
    26 Votes
    47 Posts
    2k Views
    @crazycells Good points, thanks. I completely forgot that classes are added - makes life much simpler! EDIT - seems this is pretty straightforward, and only needs the below CSS .upvoted i { color: var(--bs-user-level) !important; } This then yields [image: 1718028529465-3f072f8a-ebfa-4910-8723-73c493b8e4eb-image.png] However, the caveat here is that the .upvoted class will only show for your upvotes, and nobody else’s. However, this does satisfy the original request however I would love to see my upvoted posts more clearly, because currently, when I upvote, nothing on the post tool is changing, it would be nicer if there is an indication that I have upvoted (like a filled or colored triangle?)
  • 20 Votes
    49 Posts
    3k 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.
  • 2 Votes
    20 Posts
    947 Views
    @crazycells yes, I’m aware of that. Need to fix EDIT- fixed. Caused by the same CSS that is used to absolutely position the “verified” group badge in the posts view. Amended this CSS so that is specifically targets the post stream as below li[component="post"] a[href*="/groups/verified"] { position: absolute !important; left: 8px; z-index: 2; margin-top: 1px; border-radius: 999px !important; line-height: 14px; display: block; height: 22px; margin-left: 0px !important; }
  • 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 !
  • 6 Votes
    16 Posts
    1k Views
    And it seems to be less conflicting!