如何通过按钮触发lightgallery图片画廊进入全屏模式

原代码问题梳理 #

• 错误将lightGalleryRef绑定到每个<a>子标签，需绑定到<LightGallery>组件本身以获取实例
• openGallery函数未实现，缺少调用lightgallery实例的核心逻辑
• 按钮标签未正确闭合（原代码为</button，需修正为</button>）

修正后的完整代码 #

import { useState, useRef } from 'react';
import LightGallery from 'lightgallery/react';
import lgZoom from 'lightgallery/plugins/zoom';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
// 必须引入lightgallery样式文件
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-thumbnail.css';

const GalleryComponent = () => {
  const [fullScreenIndex, setFullScreenIndex] = useState(0);
  // 绑定ref到LightGallery组件，用于获取实例
  const lightGalleryRef = useRef<any>(null);

  // 实现打开画廊的核心函数
  const openGallery = () => {
    lightGalleryRef.current?.openGallery(fullScreenIndex);
  };

  // 点击图片时更新选中索引并打开画廊
  const handleImageClick = (index: number) => {
    setFullScreenIndex(index);
    openGallery();
  };

  // 示例图片数组，替换为你的实际图片地址
  const gallery = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
  ];

  return (
    <>
      <LightGallery
        ref={lightGalleryRef}
        mode="lg-fade"
        index={fullScreenIndex}
        appendSubHtmlTo=".lg-item"
        plugins={[lgZoom, lgThumbnail]}
      >
        {gallery.map((image: string, index: number) => (
          <a
            key={index}
            className="gallery-item"
            data-src={image}
            data-sub-html="-"
            onClick={(e) => {
              e.preventDefault(); // 阻止<a>标签默认跳转行为
              handleImageClick(index);
            }}
          >
            <img src={image} alt={`Gallery image ${index}`} />
          </a>
        ))}
      </LightGallery>

      <button onClick={openGallery}>打开全屏画廊</button>
    </>
  );
};

export default GalleryComponent;

关键修改说明 #

1. Ref绑定修正：将lightGalleryRef绑定到<LightGallery>组件，确保能获取到lightgallery的实例对象，调用其内置的openGallery方法。
2. 核心函数实现：openGallery通过ref获取实例后，传入指定索引触发全屏画廊打开。
3. 图片点击逻辑：给每个图片的<a>标签添加点击事件，更新当前选中索引并打开画廊，同时阻止默认跳转行为。
4. 样式引入：必须引入lightgallery的基础样式和插件样式，否则画廊界面会异常。

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