ui
ui copied to clipboard
fancyapps
Modular UMD
Hi,
Sorry for spamming)
Can you please make fancybox.umd.js less heavy by making it modular?
Removing panzoom, hash, thumbs, toolbar, etc. to a separate js files.
By the way maybe it is a good idea to add tags (lightbox, gallery, slider, etc.) to github main page https://github.com/fancyapps/ui below About title?
Hi,
I don't think there is a perfect solution for everyone. Some might prefer to combine everything into one file, another would not. You can always grab the source and build your own ESM/UMD bundle. Also, the modern web does not have this issue, because bundling all assets is preferred way (using Webpack or other bundlers).
Anyway, thanks for your suggestions.
@fancyapps ok, got it.
Take a look how it is done in Swiper slider https://github.com/nolimits4web/swiper
Custom build
https://swiperjs.com/swiper-api#custom-build
Using JS Modules https://swiperjs.com/swiper-api#using-js-modules
Using Build Script https://swiperjs.com/swiper-api#using-build-script
What do you think?
Removing panzoom, hash, thumbs, toolbar, etc. to a separate js files.
- Actually, they are already split into separate files.
- Panzoom is used used by Carousel and Fancybox for gestures and animations, therefore you can not remove it to decrease file size.
- Components load plugins that are defined inside
/plugins/index.jsfile (for example, https://github.com/fancyapps/ui/blob/main/src/Fancybox/plugins/index.js) and at the time of creating this codebase, it was not possible to import ES6 modules conditionally.
Why should i load file, including Panzoom and Carousel, if i don't use them on my page? Maybe, Fancybox depends on Panzoom and Carousel? and can't work without?
Fancybox is built on top of Carousel and Carousel is built on top of Panzoom. Also, Fancybox uses Panzoom for touch guestures for images. Therefore all 3 components are available from fancybox UMD file and you do not need to include the rest.
Fancybox is built on top of Carousel and Carousel is built on top of Panzoom. Also, Fancybox uses Panzoom for touch guestures for images. Therefore all 3 components are available from fancybox UMD file and you do not need to include the rest.
Ok. Thanks for explaining.
You can always grab the source and build your own ESM/UMD bundle
Hi @fancyapps, I bought v4 of the plugin and can create a customized build for my own, but I realize on v5 everything is pre-built, so this option no longer works right? Also, can I access the old Samples page for v4?
Hi, Here you can find links to past releases - https://fancyapps.com/resources/releases/
Sorry, but there are no plans to make it more modular, it would be a maintenance nightmare and would only increase complexity and file size.
@fancyapps Thanks for responding, I think it would be helpful to support v5 in order to allow custom user-made plugins to be integrated into the bundle via API. This way it can help us to migrate from v4 to v5. Great plugin, as always though