重新加载 jQuery 调整容器大小后平滑缩放平移查看器

Question

我正在开发一个响应迅速的图像查看器，并选择使用 Smooth Zoom Pan 插件来获得所需的 pan/zoom 功能。

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

控件容器需要可折叠（很好地）以允许查看器伸展以填满屏幕。为此，我使用了 jQuery 动画并为父容器设置了宽度，效果很好。

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

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%'
                });
            });
        }
    });
});

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

Answer 1

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

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

旁注：我还换掉了我的 jQuery 动画，用于将面板从屏幕上移到内置的 Bootstrap 屏幕外功能，并且只是将其更改为适用于所有屏幕尺寸。我不确定这是否对最终解决方案产生了一些影响，如我所愿。

重新加载 jQuery 调整容器大小后平滑缩放平移查看器

Reloading jQuery Smooth Zoom Pan viewer after resizing container

javascript

jquery

responsive