显示侧边栏

图片预览组件

flux:x-image-preview 是 Flux Pro Max 提供的图片预览组件，点击图片即可在全屏灯箱中放大查看，支持缩放、拖拽平移和图片组轮播，适合文档截图、博客图片等需要放大查看的场景。

核心功能

点击图片弹出全屏灯箱预览
滚轮缩放（0.5x ~ 5x），支持放大/缩小/重置按钮
缩放后鼠标拖拽平移查看细节
双击切换原始尺寸和 2x 放大
图片分组轮播，支持上一张/下一张切换
键盘快捷键（ESC 关闭、左右箭头切换）
兼容 Livewire 页面导航（livewire:navigated）

基础用法

最简单的用法，直接在布局文件中放置组件。组件会自动为页面内的所有 <img> 添加点击预览功能。

{{-- 在布局文件中引入 --}}
<body>
    {{ $slot }}

    <flux:x-image-preview />
</body>

点击下方图片体验预览效果：

图片分组轮播

通过 group 属性指定用于分组的 HTML 属性名。同组的图片可在灯箱中左右切换，不同组的图片互不干扰。

{{-- 按 data-gallery 分组 --}}
<flux:x-image-preview group="data-gallery" />

{{-- 页面中的图片 --}}
<img src="product-1.png" data-gallery="product" alt="产品图1" />
<img src="product-2.png" data-gallery="product" alt="产品图2" />
<img src="screenshot.png" alt="截图" />

点击下方任意图片，可在灯箱中左右切换同组图片：

缩放与拖拽

灯箱打开后支持以下交互操作：

滚轮 — 上下滚动缩放图片（0.5x ~ 5x）

双击 — 在原始尺寸和 2x 放大之间切换

拖拽 — 缩放超过 1x 后可鼠标拖拽平移查看细节

工具栏 — 底部工具栏提供放大、缩小、重置缩放按钮，并显示当前缩放比例

键盘快捷键

快捷键	功能
ESC	关闭预览
←	上一张图片
→	下一张图片

自定义图片选择器

通过 selector 属性指定需要预览的图片元素。默认为 main img, [data-flux-main] img，可按需缩小或扩大范围。

仅预览带特定 class 的图片

<flux:x-image-preview selector="img.previewable" />

预览整个页面的图片

<flux:x-image-preview selector="img" />

完整配置示例

在布局文件中全局引入组件，配合图片分组实现文档截图轮播预览。

{{-- 布局文件 --}}
<body>
    {{ $slot }}

    {{-- 图片预览：按 data-gallery 属性分组轮播 --}}
    <flux:x-image-preview group="data-gallery" />

    @fluxScripts
</body>

{{-- 文档页面 --}}
<flux:main>
    <h2>安装步骤</h2>
    <img src="step-1.png" data-gallery="install" alt="步骤1" />
    <img src="step-2.png" data-gallery="install" alt="步骤2" />
    <img src="step-3.png" data-gallery="install" alt="步骤3" />

    <h2>配置选项</h2>
    <img src="config.png" data-gallery="config" alt="配置界面" />
</flux:main>

属性参考

下面列出了 flux:x-image-preview 支持的全部属性。

属性	类型	默认值	说明
selector	string	main img, [data-flux-main] img	CSS 选择器，用于匹配需要添加预览功能的图片元素。
group	string\|null	null	分组属性名。设置后，只有相同属性值的图片才会在同一组内轮播。为 null 时所有匹配的图片归为一组。
zIndex	string	9999	灯箱遮罩层的 CSS z-index 值，确保灯箱显示在最上层。如果页面有更高层级的弹窗，可适当增大此值。