>Zina в 07:40, 23 січня 2023

2023-01-23T07:40:54Z

Нова сторінка

{| class="wikitable sortable"
|-
! Название !! Зависимости !! Вес .min.js !! Модальные окна !! Дата обновления !! Комментарий
|-
| [https://fancyapps.com/docs/ui/fancybox/ Fancybox 4] || — || 102 kb || Есть || 2022-02-21 || Наиболее красивый и функциональный вариант.<br>Включает в себя лайтбокс, карусель и Panzoom — увеличение и таскание внутри блока, как на картах.
|-
| [https://vue-cool-lightbox.lucaspulliese.com/ Vue Cool LightBox] || Vue || 32 kb || — || 2021-05-18 || Наиболее похож на fancybox, но pan двигает весь лист, не останавливаясь на границах фото.
|-
| [https://photoswipe.com/v5/docs/getting-started/ PhotoSwipe 5] || — || 9 kb + 47 kb || — || 2022-01-25 || Улучшенная и урезанная версия Magnific Popup: убраны модальные окна, добавлен zoom и pan.<br>Используется отдельный загрузчик минимального размера. Используется по умолчанию в Ghost.
|-
| [https://dimsemenov.com/plugins/magnific-popup/ Magnific Popup] || jQuery || 20 kb || Есть || 2021-11-26 || Нет zoom и pan, есть модальные окна
|-
| [https://github.com/electerious/basicLightbox basicLightbox] || — || 3,2 kb || Есть || 2022-01-18 || [https://codepen.io/electerious/pen/rLBvGz Демо]. Самый минималистичный. Нет zoom и pan, есть модальные окна
|}

== Vue 2 ==

'''[https://github.com/samjonesigd/vue-image-zoomer Vue Image Zoomer]'''

* [https://samueljon.es/vue-image-zoomer/ Demo]

== Vue 3 ==

=== vue-image-viewer ===

Zooming images like Medium

'''[https://github.com/guygubaby/vue-image-viewer vue-image-viewer]''' (GitHub) — Vue image viewer for vue2 and vue3 using '''[https://github.com/francoischalifour/medium-zoom medium-zoom]''' — 🔎🖼 A JavaScript library for zooming images like Medium. Демо: https://medium-zoom.francoischalifour.com/

=== vue-image-lightbox ===

Проверить на совместимость с Vue 3.

* [https://github.com/pexea12/vue-image-lightbox vue-image-lightbox] — A Vue component to display an image gallery lightbox

== Fancybox ==

=== Примеры ===

https://codepen.io/fancyapps/pens/public/

* [https://codepen.io/J3rome/pen/YEoXJq fancyBox v3.2 - Morphing modal overlay]
* [https://codepen.io/fancyapps/pen/yxmrwG fancybox v3.5 - Scrollable content]
* [https://codepen.io/fancyapps/pen/PdMgrO fancybox v3.5 - Using `data` attributes to customize]
* [https://codepen.io/fancyapps/pen/yxmrWZ fancybox v3.5 - Ajax]
* [https://codepen.io/fancyapps/pen/bxXJRr fancybox v3.5 - Display images progressively]
* [https://codepen.io/fancyapps/pen/LJMPbE fancybox v3.4 + Plyr] (a simple HTML5, YouTube and Vimeo media player)
* [https://codepen.io/fancyapps/pen/YOJWpJ fancybox v3.4 - Tippy.js] — см. [https://atomiks.github.io/tippyjs/ Tippy.js - Tooltip, Popover, Dropdown, and Menu Library]
* [https://codepen.io/fancyapps/pen/wEVOPa fancybox v3.5 - Initialize with data attributes]
* [https://codepen.io/fancyapps/pen/oPKVea fancybox v3.5 - Initialize with data attributes — Individual images]
* [https://codepen.io/fancyapps/details/JayEMa fancybox v3.4 - Mixed gallery]

=== Минимизация ===

Конфиг сборки для минимизации размера:

1) <code>fancybox/gulpfile.js</code>

<source lang="javascript">
//...
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"
])
</source>

2) В папке <code>fancybox/src/css</code> оставить один файл <code>core.css</code>

3) Пересобрать:

gulp

Итоговые файлы будут в папке <code>fancybox/dist</code>

== Для карточки товара ==

=== [https://github.com/akulubala/vue-product-zoomer Vue Product Zoomer] ===

* [https://www.yoohooworld.com/demo.html#scroll-left Типичная компоновка]
* [https://www.yoohooworld.com/demo.html#container-round С круглой линзой]

== Drag and Pan ==

* [https://github.com/LCweb-ita/LC-Mouse-Drag/ LC-Mouse-Drag] — No dependencies vanilla javascript function less than 2KB для таскания изображения. Есть затухание движения и ограничение перемещения по одной из осей. [https://www.cssscript.com/demo/image-pan-lc-mouse-drag/ Demo]

== См. также ==

* [https://github.com/ccforward/progressive-image A progressive-image module for Vanilla JavaScript and Vue 1.0+ & 2.0+]

Lightbox - Історія редагувань

>Zina в 07:40, 23 січня 2023