我尝试结合 react-image-gallery
与 react-image-magnify
获得具有放大预览效果的画廊并根据react-image-gallery
我正在传递的文档 MyReactImageMagnify
renderItem
的组成部分支持 ImageGallery
组件,但右侧没有放大图像。
这里是带放大的图库应该是这样的 https://www.amazon.com/Samsung-MicroSD-Adapter-MB-ME128GA-AM/dp/B06XWZWYVP
这是我目前拥有的代码和框 https://codesandbox.io/s/goofy-lumiere-gk1y1
class MyImageGallery extends Component {
myRenderItem() {
return <MyReactImageMagnify {...this.props} />;
}
render() {
const properties = {
thumbnailPosition: "left",
useBrowserFullscreen: false,
showPlayButton: false,
renderItem: this.myRenderItem.bind(this),
items: [
{
original: "https://placeimg.com/640/480/any/1",
thumbnail: "https://placeimg.com/250/150/any/1"
},
{
original: "https://placeimg.com/640/480/any/2",
thumbnail: "https://placeimg.com/250/150/any/2"
},
{
original: "https://placeimg.com/640/480/any/3",
thumbnail: "https://placeimg.com/250/150/any/3"
}
]
};
return <ImageGallery {...properties} />;
}
}
编辑:亚马逊只是为了说明“向右放大”。我制作了另一个带有 2 列网格的 codesandbox,你可以看到多么简单 <MyReactImageMagnify />
组件工程和<MyImageGallery />
没有。 https://codesandbox.io/s/practical-browser-0dbyo
最佳答案
我认为问题在于元素溢出。图库使用 overflow: hidden
隐藏不可见的幻灯片,因此也隐藏了缩放图像。
react-image-magnify
的好处是您可以指定要渲染大图像的门户。
这是沙箱:https://codesandbox.io/s/xenodochial-rosalind-g9ve4
创建一个带有 id 的新 div,您希望在其中显示大图像:
<Grid container spacing={4}>
<Grid item xs={6}>
<MyImageGallery />
</Grid>
<Grid container spacing={2} item xs={6} direction="column">
<Grid item>
<div id="myPortal" />
</Grid>
</Grid>
</Grid>
画廊的每个元素都是一个 ReactImageMagnify 组件,门户 ID 作为属性:
<ReactImageMagnify
{...{
smallImage: {
alt: "Wristwatch by Ted Baker London",
isFluidWidth: true,
src: "https://placeimg.com/640/480/any"
},
largeImage: {
src: "https://placeimg.com/640/480/any",
width: 640,
height: 480
},
enlargedImagePortalId: "myPortal"
}}
/>
关于reactjs - 像亚马逊一样具有放大效果的 React 图片库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56306766/