Skip to content
  • Fancybox zoom

    Unsolved Customisation fancybox zoom image
    2
    1
    0 Votes
    2 Posts
    162 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.
  • 2 Votes
    12 Posts
    899 Views
    @DownPW looks good to me.
  • [SOLVED] Fancybox doesn't work in chat

    Bugs fancybox v3prod
    3
    1
    4 Votes
    3 Posts
    409 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, } ); }); });
  • 3 Votes
    6 Posts
    2k Views
    @phenomlab haha!! You are crazy. In a good way, of course It’s a way of saying you’re awesome !
  • Fancybox now used for image handling

    Announcements fancybox
    16
    6 Votes
    16 Posts
    1k Views
    And it seems to be less conflicting!