我正在开发一个响应式图像查看器,并选择使用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%'
});
});
}
});
});
注意:我在这里提出问题是新的,所以如果您需要更多信息以便帮助我,请在下方发表评论,我会尽我所能为您提供所需。
答案 0 :(得分:0)
我最终想出了自己,而不是将图片大小调整为width: '100%'
我必须获得查看器容器的宽度,并在调整大小时设置此宽度,如下所示:
var viewerWidth = $('.viewer-content').width();
viewer.smoothZoom( 'resize', {
width: viewerWidth
});
旁注:我还换掉了我的jQuery动画,用于将面板从屏幕上移到内置的Bootstrap屏幕外功能,只是将其更改为适用于所有屏幕尺寸。我不确定这是否会对最终解决方案产生影响,因为我想要它。