Lack of interest toggleFullSize JavaScript method in XenForo.BbCodeImage doesn't work on centered layouts

[Ketola]

When using a Fixed Width Style showing a full-size version of an embedded image in a post causes the picture to overflow page borders. For a demo see this post and make sure you choose the Fixed Width Style first.

This is especially problematic if the dimensions of the attachment pictures aren't limited at all.

Suggestions for fixing:

• center the zoomed image on page and make sure it fits to page borders
• wrap the image in an A tag to allow users to ctrl-click to a full size version

Currently I have the following fix in place in /js/xenforo/full/xenforo.js, line 5268 onwards (version 1.2.1)

        toggleFullSize: function(e)
        {
            var currentWidth = this.$image.width(),
                offset, cssOffset, cssOffsetTargetLeft, scale,
                scrollLeft, scrollTop,
                layerX, layerY,
                $fullSizeImage,
                speed = window.navigator.userAgent.match(/Android|iOS|iPhone|iPad|Mobile Safari/i) ? 0 : XenForo.speed.normal,
                easing = 'easeInOutQuart';

            if (this.actualWidth > currentWidth)
            {
                offset = this.$image.offset();
                cssOffset = offset;
                layerX = e.pageX - offset.left;
                layerY = e.pageY - offset.top;
               
                // Limit zoomed image width to document width
               
                if(this.actualWidth > $('html').width()) {
                    this.actualWidth = $('html').width();
                }

                scale = this.actualWidth / currentWidth;
               
                // Center image horizontally
               
                cssOffsetTargetLeft = ($('html').width()-this.actualWidth)/2;

                if (XenForo.isRTL())
                {
                    cssOffset.right = $('html').width() - cssOffset.left - currentWidth;
                    cssOffset.left = 'auto';
                }

                $fullSizeImage = $('<img />', { src: this.$image.attr('src') })
                    .addClass('bbCodeImageFullSize')
                    .css('width', currentWidth)
                    .css(cssOffset)
                    .click(function()
                    {
                        $(this).remove();
                        $(XenForo.getPageScrollTagName()).scrollLeft(0).scrollTop(offset.top);
                    })
                    .appendTo('body')
                    .animate({ width: this.actualWidth, left: cssOffsetTargetLeft, top: cssOffset.top }, speed, easing); 
                    // Zoom image from scaled down image's top offset to maximum width 

                // remove full size image if an overlay is about to open
                $(document).one('OverlayOpening', function()
                {
                    $fullSizeImage.remove();
                });

                if (e.target == this.$image.get(0))
                {
//                    scrollLeft = offset.left + (e.pageX - offset.left) * scale - $(window).width() / 2;
//                    scrollTop = offset.top + (e.pageY - offset.top) * scale - $(window).height() / 2;
                    // Scroll top to original image's top position. The original scrollTop scrolls pretty much where it wants to
                    // Scroll left to full size image's left offset
                    scrollLeft = cssOffsetTargetLeft;
                    scrollTop = offset.top;
                }
                else
                {
                    scrollLeft = offset.left + (this.actualWidth / 2) - $(window).width() / 2;
                    scrollTop = offset.top + (this.$image.height() * scale / 2) - $(window).height() / 2;
                }

                $(XenForo.getPageScrollTagName()).animate(
                {
                    scrollLeft: scrollLeft,
                    scrollTop: scrollTop
                }, speed, easing, $.context(function()
                {
                    var tooltip = this.$image.data('tooltip');
                    if (tooltip)
                    {
                        tooltip.hide();
                    }
                }, this));
            }
        },

The image size is limited to width of the viewport (height can be larger), the left offset of the full size image is calculated based on the center of the page, and the picture is zoomed out from it's original position.

For a demonstration of the implementation, see this thread at our forum.

 

[Mike]

You've actually changed the behavior and as far as I can tell, your behavior isn't the same. The description is to view the image full size -- this means overflowing the page if necessary. This is the designed and expected behavior. Also, we intentionally only expand the image down and to the right. I think your version still constrains the image to the browser size which isn't the behavior we're trying to achieve.

Or have I misunderstood what you're reporting?

 

[Ketola]

You've understood correctly. What I did with my version was to somewhat emulate browser default functionality, which is to scale a full size image to fit the view port by default.

The current implementation of displaying the full-size picture down and right feels broken – especially on centered layouts. This was in fact reported to me by our users which lead to my "fix".

I would argue that showing a full-size 4000px by 3000px picture doesn't serve a purpose, and probably isn't what a user expects when zooming a picture. If the same image is embedded as a thumbnail, zooming it opens a LightBox layer with an option to open the full-size image in a new tab/window. Doing something similar with "full size" images would provide a more consistent user experience.

If the current behavior is indeed intentional, I would ask this thread to be moved to the suggestions forum and suggest that the re-sizing of large BB code images be made more adjustable, allowing the image to be scaled to view port dimensions at maximum and centering the image in the view port.

 

[Aivaras]

This is the designed and expected behavior.

Even if it is so it really feels broken. The goal of enlarging pictures in the setting of a forum is to zero in on the whole of the picture, not its parts. Common sense should be the guide for this particular feature.