Блог

Я использую галерею photoswipe.

Когда я это делаю, я получаю все эскизы в одной строке… Я бы хотел, чтобы они заполняли страницу как сетку.

Ниже приведен мой код компонента react. Я заметил, что если я перейду к каждому эскизу в dev tools-> inspect и изменю отображение на «встроенное», я не получу разрыв строки после / перед каждым. Однако это все равно выглядит мусором из-за отсутствия рамок и других вещей, я не знаю, как или где изменить внешний вид или стиль эскизов, чтобы включить это в мой код.

импортируйте { PhotoSwipeGallery} из ‘react-photoswipe-2’;

 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 amp;amp; frames amp;amp; frames.length amp;amp; imgGalleryH > 0 amp;amp; 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;
}