调整容器

时间:2016-08-03 15:18:40

标签: javascript jquery responsive

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

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

1 个答案:

答案 0 :(得分:0)

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

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

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