英文:
click on image on react-image-gallery and go fullscreen
问题
The Chinese translation of the code snippet you provided is as follows:
import "../../node_modules/react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from "react-image-gallery";
import { useRef } from "react";
const images = [
{
original: "https://picsum.photos/id/1018/1000/600/",
thumbnail: "https://picsum.photos/id/1018/250/150/",
},
{
original: "https://picsum.photos/id/1015/1000/600/",
thumbnail: "https://picsum.photos/id/1015/250/150/",
},
{
original: "https://picsum.photos/id/1019/1000/600/",
thumbnail: "https://picsum.photos/id/1019/250/150/",
},
];
const Carousel = (props) => {
const imageGalleryRef = useRef(null);
const onClickHandler = () => {
imageGalleryRef.current.toggleFullscreen();
};
return (
<ImageGallery
items={images}
showThumbnails={true}
showFullscreenButton={true}
showPlayButton={false}
showBullets={true}
ref={imageGalleryRef}
onClick={onClickHandler}
/>
);
};
export default Carousel;
Regarding the error message you're encountering (imageGalleryRef.current.toggleFullscreen is not a function), it seems like the toggleFullscreen function is not available at the time you're trying to call it. Ensure that the ImageGallery component properly initializes and provides this function. If you can run it from the console, it might be related to the timing of when the component is fully mounted and ready.
Regarding implementing clicking on the image and going fullscreen, the approach you've taken with the onClickHandler and toggleFullscreen is generally correct. However, without knowing more about the specific behavior you want, it's challenging to determine if it's the "best" way. This approach allows you to toggle fullscreen when clicking on the image, which is a common use case.
英文:
import "../../node_modules/react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from "react-image-gallery";
import { useRef } from "react";
const images = [
{
original: "https://picsum.photos/id/1018/1000/600/",
thumbnail: "https://picsum.photos/id/1018/250/150/",
},
{
original: "https://picsum.photos/id/1015/1000/600/",
thumbnail: "https://picsum.photos/id/1015/250/150/",
},
{
original: "https://picsum.photos/id/1019/1000/600/",
thumbnail: "https://picsum.photos/id/1019/250/150/",
},
];
const Carousel = (props) => {
const imageGalleryRef = useRef(null);
const onClickHandler = () => {
imageGalleryRef.current.toggleFullscreen();
};
return (
<ImageGallery
items={images}
showThumbnails={true}
showFullscreenButton={true}
showPlayButton={false}
showBullets={true}
ref={imageGalleryRef}
onClick={onClickHandler}
/>
);
};
export default Carousel;
this returns imageGalleryRef.current.toggleFullscreen is not a function
but I can run that function from the console and it works, what am I doing wrong?
also is this the best way to implement clicking on the image and going fullscreen?
答案1
得分: 1
应该使用fullScreen而不是toggleFullscreen。根据函数文档：
可以使用 refs 访问以下函数：
- play(): 播放幻灯片
- pause(): 暂停幻灯片
- fullScreen(): 激活全屏
- exitFullScreen(): 退出全屏
- slideToIndex(index): 切换到特定索引
- getCurrentIndex(): 返回当前索引
英文:
It should be fullScreen instead of toggleFullscreen. As per the documentation on functions:
> The following functions can be accessed using refs
>
> - play(): plays the slides
> - pause(): pauses the slides
> - fullScreen(): activates full screen
> - exitFullScreen(): deactivates full screen
> - slideToIndex(index): slides to a specific index
> - getCurrentIndex(): returns the current index
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论