Lightbox
| Название | Зависимости | Вес .min.js | Модальные окна | Дата обновления | Комментарий |
|---|---|---|---|---|---|
| Fancybox 4 | — | 102 kb | Есть | 2022-02-21 | Наиболее красивый и функциональный вариант. Включает в себя лайтбокс, карусель и Panzoom — увеличение и таскание внутри блока, как на картах. |
| Vue Cool LightBox | Vue | 32 kb | — | 2021-05-18 | Наиболее похож на fancybox, но pan двигает весь лист, не останавливаясь на границах фото. |
| PhotoSwipe 5 | — | 9 kb + 47 kb | — | 2022-01-25 | Улучшенная и урезанная версия Magnific Popup: убраны модальные окна, добавлен zoom и pan. Используется отдельный загрузчик минимального размера. Используется по умолчанию в Ghost. |
| Magnific Popup | jQuery | 20 kb | Есть | 2021-11-26 | Нет zoom и pan, есть модальные окна |
| basicLightbox | — | 3,2 kb | Есть | 2022-01-18 | Демо. Самый минималистичный. Нет zoom и pan, есть модальные окна |
Zooming images like Medium
vue-image-viewer (GitHub) — Vue image viewer for vue2 and vue3 using medium-zoom — 🔎🖼 A JavaScript library for zooming images like Medium. Демо: https://medium-zoom.francoischalifour.com/
Проверить на совместимость с Vue 3.
- vue-image-lightbox — A Vue component to display an image gallery lightbox
https://codepen.io/fancyapps/pens/public/
- fancyBox v3.2 - Morphing modal overlay
- fancybox v3.5 - Scrollable content
- fancybox v3.5 - Using `data` attributes to customize
- fancybox v3.5 - Ajax
- fancybox v3.5 - Display images progressively
- fancybox v3.4 + Plyr (a simple HTML5, YouTube and Vimeo media player)
- fancybox v3.4 - Tippy.js — см. Tippy.js - Tooltip, Popover, Dropdown, and Menu Library
- fancybox v3.5 - Initialize with data attributes
- fancybox v3.5 - Initialize with data attributes — Individual images
- fancybox v3.4 - Mixed gallery
Конфиг сборки для минимизации размера:
1) fancybox/gulpfile.js
//...
gulp.task("scripts", function() {
return gulp
.src([
"src/js/core.js",
// "src/js/media.js",
"src/js/guestures.js",
// "src/js/slideshow.js",
// "src/js/fullscreen.js",
// "src/js/thumbs.js",
// "src/js/hash.js",
"src/js/wheel.js"
])
2) В папке fancybox/src/css оставить один файл core.css
3) Пересобрать:
gulp
Итоговые файлы будут в папке fancybox/dist
- LC-Mouse-Drag — No dependencies vanilla javascript function less than 2KB для таскания изображения. Есть затухание движения и ограничение перемещения по одной из осей. Demo