diff --git a/css/60_photos.css b/css/60_photos.css index 98d568a68..96888a499 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -415,9 +415,7 @@ label.streetside-hires { } .vegbilder-wrapper .plane-frame { - display: flex; - align-items: center; - justify-content: center; + display: block; overflow: hidden; height: 100%; width: 100%; diff --git a/modules/services/plane_photo.js b/modules/services/plane_photo.js index 8a5b246fc..045ac812e 100644 --- a/modules/services/plane_photo.js +++ b/modules/services/plane_photo.js @@ -7,6 +7,7 @@ const dispatch = d3_dispatch('viewerChanged'); let _photo; let _wrapper; let imgZoom; +let _widthOverflow; function zoomPan (d3_event) { let t = d3_event.transform; @@ -17,10 +18,10 @@ function zoomBeahvior () { const {width: wrapperWidth, height: wrapperHeight} = _wrapper.node().getBoundingClientRect(); const {naturalHeight, naturalWidth} = _photo.node(); const intrinsicRatio = naturalWidth / naturalHeight; - const widthOverflow = wrapperHeight * intrinsicRatio - wrapperWidth; + _widthOverflow = wrapperHeight * intrinsicRatio - wrapperWidth; return d3_zoom() - .extent([[widthOverflow / 2, 0], [wrapperWidth + widthOverflow / 2, wrapperHeight]]) - .translateExtent([[0, 0], [wrapperWidth + widthOverflow, wrapperHeight]]) + .extent([[0, 0], [wrapperWidth, wrapperHeight]]) + .translateExtent([[0, 0], [wrapperWidth + _widthOverflow, wrapperHeight]]) .scaleExtent([1, 15]) .on('zoom', zoomPan); } @@ -40,12 +41,6 @@ export default { init: async function(context, selection) { this.event = utilRebind(this, dispatch, 'on'); - imgZoom = d3_zoom() - .extent([[0, 0], [320, 240]]) - .translateExtent([[0, 0], [320, 240]]) - .scaleExtent([1, 15]) - .on('zoom', this.zoomPan); - _wrapper = selection .append('div') .attr('class', 'photo-frame plane-frame') @@ -96,7 +91,7 @@ export default { if (!keepOrientation) { imgZoom = zoomBeahvior(); _wrapper.call(imgZoom); - _wrapper.call(imgZoom.transform, d3_zoomIdentity); + _wrapper.call(imgZoom.transform, d3_zoomIdentity.translate(-_widthOverflow / 2, 0)); } }); return this;