diff --git a/src/ViewerCore.tsx b/src/ViewerCore.tsx index 577276f..ca7b5d8 100644 --- a/src/ViewerCore.tsx +++ b/src/ViewerCore.tsx @@ -135,8 +135,18 @@ export default class ViewerCore extends React.Component { - const [width, height] = this.getImgWidthHeight(imgWidth, imgHeight); + loadImgSuccess = (activeImage: ImageDecorator, imgWidth, imgHeight) => { + let realImgWidth = imgWidth; + let realImgHeight = imgHeight; + if (this.props.defaultSize) { + realImgWidth = this.props.defaultSize.width; + realImgHeight = this.props.defaultSize.height; + } + if (activeImage.defaultSize) { + realImgWidth = activeImage.defaultSize.width; + realImgHeight = activeImage.defaultSize.height; + } + const [width, height] = this.getImgWidthHeight(realImgWidth, realImgHeight); let left = (this.containerWidth - width) / 2; let top = (this.containerHeight - height - this.footerHeight) / 2; this.setState({ @@ -154,10 +164,10 @@ export default class ViewerCore extends React.Component 0) { - imgSrc = images[activeIndex].src; + activeImage = images[activeIndex]; } let loadComplete = false; let img = new Image(); @@ -167,7 +177,7 @@ export default class ViewerCore extends React.Component { if (!loadComplete) { - this.loadImgSuccess(img.width, img.height); + this.loadImgSuccess(activeImage, img.width, img.height); } }; img.onerror = () => { @@ -178,10 +188,10 @@ export default class ViewerCore extends React.Component { }); it('change active iamge whith prev and next button', () => { - viewerHelper.open(); + viewerHelper.new(); viewerHelper.open(); $$('li[data-key=next]')[0].click(); @@ -530,4 +530,37 @@ describe('Viewer', () => { imgNode = $$('img.react-viewer-image')[0]; expect(getTransformValue(imgNode.style.transform).rotate).toBe('0'); }); + + it('set default size', () => { + viewerHelper.new({ + downloadable: true, + defaultSize: { + width: 100, + height: 100, + }, + images: [{ + src: img, + alt: 'lake', + downloadUrl: '', + }, { + src: img2, + alt: 'mountain', + downloadUrl: '', + defaultSize: { + width: 200, + height: 200, + }, + }], + }); + viewerHelper.open(); + + let imgNode = $$('img.react-viewer-image')[0]; + expect(imgNode.style.width).toBe('100px'); + expect(imgNode.style.width).toBe('100px'); + + $$('li[data-key=next]')[0].click(); + imgNode = $$('img.react-viewer-image')[0]; + expect(imgNode.style.width).toBe('200px'); + expect(imgNode.style.width).toBe('200px'); + }); });