2023-06-19 23:14:41 +03:00
|
|
|
|
# lightbox-gallery
|
2023-06-19 20:58:52 +03:00
|
|
|
|
|
|
|
|
|
## Требования
|
|
|
|
|
|
2023-08-28 12:07:44 +03:00
|
|
|
|
- [Swiper](https://github.com/nolimits4web/swiper) версии ^10.2.0
|
2023-06-19 20:58:52 +03:00
|
|
|
|
|
|
|
|
|
## Подключение и настройка
|
|
|
|
|
|
|
|
|
|
### HTML
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<div id="list">
|
|
|
|
|
<a href="/example.jpg">...</a>
|
|
|
|
|
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">...</a>
|
|
|
|
|
</div>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Стили
|
|
|
|
|
|
|
|
|
|
```scss
|
|
|
|
|
@use '@advdominion/lightbox-gallery/styles.css';
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Минимальные настройки
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import gallery from '@advdominion/lightbox-gallery';
|
|
|
|
|
|
|
|
|
|
gallery(document.getElementById('list'), {
|
|
|
|
|
icons: {
|
|
|
|
|
close: `/icons.svg#close`,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Все настройки
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import gallery from '@advdominion/lightbox-gallery';
|
|
|
|
|
|
|
|
|
|
gallery(document.getElementById('list'), {
|
|
|
|
|
swiper: {
|
|
|
|
|
speed: duration.effect.s,
|
|
|
|
|
pagination: {
|
|
|
|
|
el: '.swiper-pagination',
|
|
|
|
|
},
|
|
|
|
|
navigation: {
|
|
|
|
|
prevEl: '.swiper-button-prev',
|
|
|
|
|
nextEl: '.swiper-button-next',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
pagination: `
|
|
|
|
|
<div class="swiper-pagination"></div>
|
|
|
|
|
`,
|
|
|
|
|
navigation: `
|
|
|
|
|
<div class="swiper-button-prev"></div>
|
|
|
|
|
<div class="swiper-button-next"></div>
|
|
|
|
|
`,
|
|
|
|
|
animation: {
|
|
|
|
|
show: {
|
|
|
|
|
duration: 500,
|
|
|
|
|
easing: 'linear',
|
|
|
|
|
},
|
|
|
|
|
hide: {
|
|
|
|
|
duration: 500,
|
|
|
|
|
easing: 'linear',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
icons: {
|
|
|
|
|
close: `/icons.svg#close`,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
```
|