反应photowipe缩略图的画廊将不会显示为网格

问题描述

我正在使用相册相册。

这样做时，我将所有缩略图都放在一行中...我希望它们像网格一样填充页面。

下面是我的React组件代码。我注意到，如果我进入开发工具->检查中的每个缩略图，然后将显示更改为“内联”，则在每个之前/之后都不会出现换行符。由于缺少框架和其他内容，它看起来仍然很垃圾。但是，我不知道如何或在哪里修改缩略图的外观或样式，将其放入我的代码中。

从“ react-photoswipe-2”导入{photoswipe gallery};

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 (将#修改为@）

photoswipe reactjs reactjs reactjs reactjs