调整容器大小后重新加载 jQuery Smooth Zoom Pan 查看器答案

【问题标题】：Reloading jQuery Smooth Zoom Pan viewer after resizing container调整容器大小后重新加载 jQuery Smooth Zoom Pan 查看器
【发布时间】：2016-08-03 15:18:40
【问题描述】：

我正在开发一个响应式的图像查看器，并选择使用 Smooth Zoom Pan 插件来获得所需的平移/缩放功能。

我有 2 个主面板，查看器容器和一个控件容器，它们使用 Bootstrap 3 网格系统并排放置。

控件容器需要是可折叠的（很好），以允许查看者伸展以填满屏幕。为了做到这一点，我使用了 jQuery 动画并为父容器设置了宽度，这可以正常工作。

我想知道的是，如何使平滑缩放平移查看器与父容器宽度匹配？这是我目前拥有的，但是当查看器调整大小时，我失去了平移/缩放功能。

HTML：

<div class="container-fluid main-container">
    <div class="row">
        <div class="col-md-9">
            <div class="viewer-container">
                <div class="viewer-content">
                    <img src="/images/site/your_image.jpg" border="0" id="yourImageID" />
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="controls-content">
                <h2>Currently viewing:</h2>
                <p class="time">12:00</p>
                <p class="date">Thursday 19th July 2016</p>
                <div id="viewerCalendar"></div>
                    <a class="btn primary btn-block"><span class="icon-spinner11"></span>Get latest images</a>
                    <a class="btn primary btn-block"><span class="icon-lock"></span>Login</a>
                </div>
            </div>
            <div class="close-tab">
                 <a class="btn primary tab" id="close-controls">close</a>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT：

jQuery(function($){
    $('#close-controls').on('click', function() {
        $(this).toggleClass("closed");
        var controlsContent = $('.controls-content');
        var viewerContainer = $('.viewer-container');
        if (controlsContent.is(':visible')) {
            controlsContent.slideToggle('slow', function () {
                viewerContainer.parent().css('width', '100%');
                viewerContainer.animate({
                    width:'100%'
                }, "slow", function () {
                    $('#yourImageID').smoothZoom('resize', {
                        width: '100%'
                    });
                });
            });
        } else {
            viewerContainer.animate({
                width: '75%'
            }, "slow", function () {
                viewerContainer.parent().css('width','75%');
                viewerContainer.css('width','100%');
                controlsContent.slideToggle('slow');
                $('#yourImageID').smoothZoom('resize', {
                    width: '100%'
                });
            });
        }
    });
});

注意：我是在这里提问的新手，所以如果您需要更多信息来帮助我，请在下面发表评论，我会尽力为您提供所需的信息。

【问题讨论】：

标签： javascript jquery responsive

【解决方案1】：

最后我自己想通了，而不是将图像大小调整为width: '100%'，我必须获取查看器容器的宽度并将此宽度设置为调整大小，如下所示：

var viewerWidth = $('.viewer-content').width();
viewer.smoothZoom( 'resize', {
    width: viewerWidth
});

旁注：我还将用于将面板移出屏幕的 jQuery 动画换成了内置的 Bootstrap 离屏功能，并将其更改为适用于所有屏幕尺寸。我不确定这是否对最终解决方案按我想要的那样工作产生了一些影响。

【讨论】：