Question

我正在开发一个响应式图像查看器，并选择使用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%'
                });
            });
        }
    });
});

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

Answer 1

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

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

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

调整容器

1 个答案: