Как я могу интегрировать Fancybox в Laravel Nova для галереи изображений? ⇐ Php

[Anonymous]

Я строю проект Laravel Nova и хотел бы интегрировать Fancybox для отображения галереи изображений с функциональностью Lightbox и слайдера. У меня есть поле (хранящееся в качестве массива путей изображения JSON), которое я хочу отображать в качестве кликабельных миниатюр. При щелчке, миниатюры должны открываться в модале Fancybox с поддержкой навигации (слайдер). : Style и Nova :: Script) и инициализируйте Fancybox с помощью пользовательского файла JavaScript. Я ожидаю, что изображения откроются в модальной лайтбоксе с функциональностью слайдера вместо того, чтобы просто находить на URL -адрес изображения. < /P>
Что я попробовал: < /p>
Загрузка активов в NovaserviceProvider:
в моем приложении/поставщиках/novaserviceprovider.php, я загружаю Fancybox (и jQuery, так как Fancybox 3 зависит от этого) следующим образом:

Код: Выделить всё

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

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

Nova::serving(function (ServingNova $event) {
// Load Fancybox CSS
Nova::style('fancybox', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css');

// Load jQuery first (Fancybox depends on it)
Nova::script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js');

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

// Load custom initialization script
Nova::script('fancybox-init', asset('js/fancybox-init.js'));
});
}

Инициализация Fancybox в пользовательском скрипте:
я создал файл на public/js/fancybox-init.js со следующим контентом, чтобы связать Fancybox с элементами с данными fancybox Атрибут: < /p>
$(document).ready(function() {
// Bind Fancybox to any element with the data-fancybox attribute
$('[data-fancybox]').fancybox({
loop: true, // Enable looping of gallery images
// You can add additional options here
});
});
< /code>
рендеринг галереи в ресурсе Nova:
в одном из моих ресурсов Nova я выводу галерею, используя текстовое поле, которое декодирует массив JSON Paths: < /p >
use Laravel\Nova\Fields\Text;

Text::make('Images', 'image')
->displayUsing(function ($value) {
$images = json_decode($value, true);
if (empty($images)) {
return 'No images available';
}

$html = '';
foreach ($images as $image) {
$url = asset($image);
$html .= '';
$html .= '';
$html .= '';
}
$html .= '';
return $html;
})
->asHtml();
< /code>
Я ожидал, что щелчок любой миниатюры в ресурсе Nova запустит Fancybox, чтобы перехватить событие Click, открыв изображение в модальной лайтбоксе с навигацией слайдеров. Вместо этого я не уверен, работает ли интеграция как предполагаемое или есть какие-то NOVA-специфические соображения (такие как динамически загруженное содержание или кэширование активов), которые мне нужно решить.

Подробнее здесь: https://stackoverflow.com/questions/794 ... ge-gallery