fancyapps / ui

A library of JavaScript UI components, includes the best lightbox - Fancybox5
https://fancyapps.com/
Other
722 stars 91 forks source link

Download button is disabled for videos #656

Open muhammedjafer opened 1 month ago

muhammedjafer commented 1 month ago

Describe the bug

i just can not download the videos when i open them using fancybox, images are working and i can download them, here is the code:

window.addEventListener('init-fancybox', () => {
    //load fancybox image preview
    Fancybox.bind("[data-fancybox]", {
        contentClick: "iterateZoom",
        Images: {
            Panzoom: {
            maxScale: 8,
            },
        },
        protect: false,
        Toolbar: {
            display: {
            left: ["infobar"],
            middle: [],
            right: ["slideshow", "download", "thumbs", "close"],
            },
        },
    });
});

Reproduction

i just can not download the videos when i open them using fancybox, images are working and i can download them, here is the code: window.addEventListener('init-fancybox', () => { //load fancybox image preview Fancybox.bind("[data-fancybox]", { contentClick: "iterateZoom", Images: { Panzoom: { maxScale: 8, }, }, protect: false, Toolbar: { display: { left: ["infobar"], middle: [], right: ["slideshow", "download", "thumbs", "close"], }, }, }); });

Additional context

No response

fancyapps commented 1 month ago

Video download is currently not provided. You can create your own custom button to provide the download functionality, or try adding the data-download-src attribute to your links.

muhammedjafer commented 1 month ago

I have data-download-src, but how can i add a custom button for the download of the video?,

<a data-fancybox="gallery" href="{{ $href }}" wire:ignore>
    <img class="img-thumbnail gallery-image-{{ $id }} {{ $cols }}" data-download-src="{{ $src }}" src="{{ $src }}" alt="Thumbnail 2" style="height:60px!important;width:60px!important;">
</a>