css - react photoswipe 缩略图库将不会显示为网格
问题描述
我正在使用照片滑动画廊。
当我这样做时,我将所有缩略图放在一行中......我希望它们像网格一样填充页面。
下面是我的反应组件代码。我注意到,如果我在 dev tools->inspect 中查看每个缩略图并将显示更改为“inline”,我不会在每个缩略图之后/之前出现换行符。由于缺少框架和其他东西,它看起来仍然很垃圾,但是,我不知道如何或在哪里修改缩略图的外观或样式将其放入我的代码中。
从“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 >
);
}
解决方案
编辑你的 CSS。尝试覆盖容器级别的显示属性(.pswp-thumbnails):
.pswp-thumbnails
{
display: flex;
}
...或在缩略图级别(.pswp-thumbnail):
.pswp-thumbnail {
display: inline-block;
}
推荐阅读
- azure - 将参数从 C# 函数应用传递到 Azure 中的另一个 Javascript 函数应用
- excel - Excel-每次在另一个单元格中插入单元格值
- mysql - 上周某一天的所有记录
- python - 二进制数到 ASCII 数转换器不起作用(PyVersion 3.6.4)
- f# - 在 F# 中运行 ML.Net Iris 演示时,我是否使用了错误的 TextLoader?
- excel - 如何 COUNTIF 两组标准是否正确(可能很容易)
- swift - Swift 的 Set 等价性测试的复杂性
- java - Jersey JAX-RS 1.0 请求未完成,客户端超时
- io - 如何管理处理中的多个串行消息
- javascript - 将 required 属性添加到条件字段