mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
added fallback for single images
This commit is contained in:
parent
45c935af3b
commit
83e1902e83
8 changed files with 16 additions and 4 deletions
|
@ -81,6 +81,7 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
|
||||||
width="100%"
|
width="100%"
|
||||||
height="100%"
|
height="100%"
|
||||||
filter="url(#f1)"
|
filter="url(#f1)"
|
||||||
|
onLoad={onLoad}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { FC, useCallback, useEffect, useState } from 'react';
|
import React, { FC, useCallback, useState } from 'react';
|
||||||
import { INodeComponentProps } from '~/redux/node/constants';
|
import { INodeComponentProps } from '~/redux/node/constants';
|
||||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||||
|
|
||||||
|
@ -14,9 +14,6 @@ import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
|
||||||
import SwiperClass from 'swiper/types/swiper-class';
|
import SwiperClass from 'swiper/types/swiper-class';
|
||||||
import { modalShowPhotoswipe } from '~/redux/modal/actions';
|
import { modalShowPhotoswipe } from '~/redux/modal/actions';
|
||||||
import { useDispatch } from 'react-redux';
|
import { useDispatch } from 'react-redux';
|
||||||
import classNames from 'classnames';
|
|
||||||
import { getURL } from '~/utils/dom';
|
|
||||||
import { PRESETS } from '~/constants/urls';
|
|
||||||
import { ImagePreloader } from '~/components/media/ImagePreloader';
|
import { ImagePreloader } from '~/components/media/ImagePreloader';
|
||||||
|
|
||||||
SwiperCore.use([Navigation, Pagination, Keyboard]);
|
SwiperCore.use([Navigation, Pagination, Keyboard]);
|
||||||
|
@ -56,9 +53,23 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (images.length === 1) {
|
||||||
|
return (
|
||||||
|
<div className={styles.single}>
|
||||||
|
<ImagePreloader
|
||||||
|
file={images[0]}
|
||||||
|
onLoad={updateSwiper}
|
||||||
|
onClick={() => onOpenPhotoSwipe(0)}
|
||||||
|
className={styles.image}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.wrapper}>
|
<div className={styles.wrapper}>
|
||||||
<Swiper
|
<Swiper
|
||||||
|
enabled={images.length > 1}
|
||||||
initialSlide={0}
|
initialSlide={0}
|
||||||
slidesPerView="auto"
|
slidesPerView="auto"
|
||||||
onSwiper={setControlledSwiper}
|
onSwiper={setControlledSwiper}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue