如何设置Yet Another React Lightbox幻灯片图片默认缩放显示？

我在项目中使用了Yet Another React Lightbox，整体体验不错，但需要实现幻灯片图片默认处于缩放状态（对应transform: scale(5)的效果），现寻求实现方法。

我的代码（所有功能正常，仅需设置图片默认缩放）：

import React, { useState } from "react";
import { IoMdImages } from "react-icons/io";
import Lightbox from "yet-another-react-lightbox";
import Captions from "yet-another-react-lightbox/plugins/captions";
import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
import Slideshow from "yet-another-react-lightbox/plugins/slideshow";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import Video from "yet-another-react-lightbox/plugins/video";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/thumbnails.css";

const PortfolioCard = (portfolioImages) => {

const [openLightBox, setopenLightBox] = useState(false);

  return (
<div className="open_gallery_button">
   <IoMdImages
      className="portfolio_gallery_btn"
      type="button"
      onClick={() => setopenLightBox(true)}
   />
   <Lightbox
      open={openLightBox}
      close={() => setopenLightBox(false)}
      plugins={[
      Captions,
      Fullscreen,
      Slideshow,
      Thumbnails,
      Video,
      Zoom,
      ]}

     slides={portfolioImages.galleryImages}
   />
</div>
);
};

解决方案 #

通过Zoom插件提供的配置项，可直接设置图片的初始缩放级别：

1. 在Lightbox组件中添加zoom属性，配置initialZoom参数为你需要的缩放倍数（这里是5，对应transform: scale(5)）。

修改后的完整代码：

import React, { useState } from "react";
import { IoMdImages } from "react-icons/io";
import Lightbox from "yet-another-react-lightbox";
import Captions from "yet-another-react-lightbox/plugins/captions";
import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
import Slideshow from "yet-another-react-lightbox/plugins/slideshow";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import Video from "yet-another-react-lightbox/plugins/video";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/thumbnails.css";

const PortfolioCard = (portfolioImages) => {

const [openLightBox, setopenLightBox] = useState(false);

  return (
<div className="open_gallery_button">
   <IoMdImages
      className="portfolio_gallery_btn"
      type="button"
      onClick={() => setopenLightBox(true)}
   />
   <Lightbox
      open={openLightBox}
      close={() => setopenLightBox(false)}
      plugins={[
      Captions,
      Fullscreen,
      Slideshow,
      Thumbnails,
      Video,
      Zoom,
      ]}
      // 添加Zoom配置，设置初始缩放倍数为5
      zoom={{ initialZoom: 5 }}
     slides={portfolioImages.galleryImages}
   />
</div>
);
};

说明 #

• initialZoom是Zoom插件的核心配置参数，接受数值类型，代表图片打开时的初始缩放倍数。
• 确保已正确引入Zoom插件（代码中已完成这一步），配置才能生效。

内容的提问来源于stack exchange，提问作者Md Injamul