如何解决反应photowipe缩略图的画廊将不会显示为网格
我正在使用相册相册。
这样做时,我将所有缩略图都放在一行中...我希望它们像网格一样填充页面。
下面是我的React组件代码。我注意到,如果我进入开发工具->检查中的每个缩略图,然后将显示更改为“内联”,则在每个之前/之后都不会出现换行符。由于缺少框架和其他内容,它看起来仍然很垃圾。但是,我不知道如何或在哪里修改缩略图的外观或样式,将其放入我的代码中。
从“ react-photoswipe-2”导入{photoswipegallery};
const useStyles = makeStyles((theme) => ({
loadingPaper: {
margin: "auto",width: '50%',padding: '10px',marginTop: "50px"
}
}));
function FrameViewer(props) {
const classes = useStyles();
let { cameraAccessor } = useParams();
const [frames,setFrames] = useState([]);
const [isgalleryOpen,setIsgalleryOpen] = useState(false);
const [imggalleryH,setgalleryImgH] = useState(0);
const [imggalleryW,setgalleryImgW] = useState(0);
const [cameraID,setCameraID] = useState("");
const { cameras } = props;
async function fetchCameraData(cameraAccessor) { // Todo: check if already loading before running. // code to get filenames and what not
}
useEffect(() => {
// code to lead camera data
},[cameraAccessor]);
const getThumbnailContent = item => (
<img src={item.thumbnail} width={120} height={90} alt="" />
);
let cam = cameras[cameraID];
if (cam) { // photoswipe requires a Height and Width ... so we need to load the first image and see how big before we can incept photoswipe.
var img = new Image();
img.onload = function () {
setgalleryImgH(img.height);
setgalleryImgW(img.width);
}
img.src = "https://apps.usgs.gov/sstl/media/cameras/" + cameraFolderName(cam) + "/" + cameraFolderName(cam) + MOST_RECENT_FRAME_SUFFIX;
}
return (
<React.Fragment>
{cam && frames && frames.length && imggalleryH > 0 && imggalleryW > 0
? <photoswipegallery
items={frames.map((filename) => {
return {
src: 'https://example.com/media/cameras/' + cameraFolderName(cam) + '/' + filename,thumbnail: 'https://example.com/media/cameras/' + cameraFolderName(cam) + '/' + filename,w: imggalleryW,h: imggalleryH,title: filename.replace("_overlay.jpg","").split("___")[1].replace("_"," ")
}
})}
options={{
cloSEOnScroll: false
}}
thumbnailContent={getThumbnailContent}
isOpen={isgalleryOpen}
onClose={() => setIsgalleryOpen(false)}
/>
: <Paper elevation={5} className={classes.loadingPaper}><Typography color="textSecondary" align='center'>loading...</Typography></Paper>
}
</React.Fragment >
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。