如何在Laravel Nova中集成Fancybox实现图片画廊功能？

核心问题排查与适配调整 #

你的基础实现思路是可行的，但Laravel Nova有几个专属机制需要适配，以下是关键修正点：

1. 避免内置jQuery冲突 #

Nova本身已经内置了jQuery，重复引入会导致版本冲突，直接移除自定义的jQuery加载代码：

use Laravel\Nova\Nova;
use Laravel\Nova\Events\ServingNova;

public function boot()
{
    parent::boot();

    Nova::serving(function (ServingNova $event) {
        // 加载Fancybox CSS
        Nova::style('fancybox', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css');
        
        // 移除重复引入的jQuery，使用Nova内置版本
        // Nova::script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js');

        // 加载Fancybox JS
        Nova::script('fancybox', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js');

        // 加载自定义初始化脚本
        Nova::script('fancybox-init', asset('js/fancybox-init.js'));
    });
}

2. 适配Nova的动态内容加载 #

Nova的详情页、资源列表通过AJAX动态渲染，$(document).ready()仅在页面首次加载时执行，后续动态生成的内容无法被绑定。改用Nova专属的nova-loaded事件监听：

// 监听Nova内容加载完成事件，适配动态渲染的内容
document.addEventListener('nova-loaded', function() {
    $('[data-fancybox="gallery"]').fancybox({
        loop: true,
        toolbar: true,
        navigation: true
    });
});

// 保留初始加载绑定，确保首次渲染内容生效
$(document).ready(function() {
    $('[data-fancybox="gallery"]').fancybox({
        loop: true,
        toolbar: true,
        navigation: true
    });
});

3. 优化字段渲染规范 #

用RawHtml字段替代Text::asHtml()，更符合Nova的字段设计规范，同时添加XSS防护：

use Laravel\Nova\Fields\RawHtml;

RawHtml::make('Images', function ($value) {
    $images = json_decode($value, true);
    if (empty($images)) {
        return '<span class="text-gray-500">No images available</span>';
    }
    
    $html = '<div class="gallery" style="display: flex; flex-wrap: wrap; gap: 4px;">';
    foreach ($images as $index => $image) {
        $url = asset($image);
        // 转义URL防止XSS，添加图片标题增强体验
        $html .= '<a data-fancybox="gallery" href="' . e($url) . '" data-caption="Image ' . ($index + 1) . '" style="display: block;">';
        $html .= '<img src="' . e($url) . '" alt="Gallery Image" style="width: 60px; height: 60px; object-fit: cover; border-radius: 4px;" />';
        $html .= '</a>';
    }
    $html .= '</div>';
    return $html;
});

4. 清除缓存确保生效 #

Nova会缓存资源加载顺序，修改代码后执行以下命令清除缓存：

php artisan nova:clear-cache

同时清除浏览器缓存，确保新的JS/CSS资源生效。

验证方法 #

1. 打开浏览器控制台（F12），检查是否存在$ is not defined或fancybox is not a function错误；
2. 在Network标签确认Fancybox的CSS/JS已成功加载，无404状态；
3. 点击缩略图，测试灯箱弹出及滑块导航功能是否正常。

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