Laravel Backpack集成PhotoSwipe Lightbox图片缩放失效求助

问题根源 #

你的配置存在两个核心问题：

• 选择器匹配错误：当前children: '.enable-zoom-image'指向的是包裹<a>的div元素，而PhotoSwipe需要绑定到包含href和data-pswp-*属性的<a>标签上才能触发缩放，否则点击会直接触发<a>的默认跳转行为。
• 重复类名干扰：视图中外层div和内部div都加了enable-zoom-image类，导致PhotoSwipe绑定到非触发元素上，无法拦截<a>的跳转。

修复步骤 #

1. 修正PhotoSwipe初始化配置

修改resources/js/swipe.js，将children选择器调整为直接指向带触发属性的<a>标签：

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import 'photoswipe/style.css';

const lightbox = new PhotoSwipeLightbox({
    gallery: 'body',
    // 直接选中<a>标签，用明确类名避免混淆
    children: '.pswp-image-link',
    showHideAnimationType: 'zoom',
    pswpModule: () => import('photoswipe')
});
lightbox.init();

2. 调整视图结构

将触发类名移到<a>标签上，移除无关元素的重复类名，确保data-pswp-width和data-pswp-height属性正确关联到<a>：

<div>
    <a href="{{ $image }}"
       class="pswp-image-link"
       data-pswp-width="1669"
       data-pswp-height="2500"
       rel="noreferrer">
        <div class="d-flex py-1 align-items-center"
             style="width: {{ $width ?? '250px' }}; height: {{ $height ?? '150px' }};">
            <img src="{{ $image }}" style="object-fit: contain; width: 100%; height: 100%;"
                 onerror="this.src='/images/car-default.jpg'">
        </div>
    </a>
</div>

3. 替代方案（无需改类名）

如果不想新增类名，也可以直接修改选择器为.enable-zoom-image a，但推荐使用明确类名避免后续冲突：

// 替代配置：通过父类选择内部的<a>标签
children: '.enable-zoom-image a',

原理说明 #

当PhotoSwipe正确绑定到<a>标签时，会自动拦截其默认跳转行为，读取href作为大图地址，data-pswp-width和data-pswp-height作为大图尺寸，从而触发缩放弹窗。

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