Браузер фотографій
Photo Browser — це компонент перегляду фотографій для відображення колекції фотографій / зображень. Фотографії можна масштабувати та панорамувати (необов’язково).
Photo Browser використовує компонент
Swiper Slider
для ковзання між фотографіями.
Методи застосунку Фотобраузер
Давайте розглянемо пов’язані методи роботи застосунку Photo Browser:
Метод | Опис |
---|---|
app.photoBrowser.create( parameters ) | створити екземпляр Photo Browser
● Метод повертає створений екземпляр Photo Browser |
app.photoBrowser.destroy( el ) | знищити екземпляр Photo Browser
● |
app.photoBrowser.get( el ) | отримати екземпляр Photo Browser за елементом HTML
● Метод повертає екземпляр Photo Browser |
Наприклад:
var photoBrowser = app.photoBrowser.create({
photos: [
'path/to/photo-1.jpg',
'path/to/photo-2.jpg'
],
});
Параметри фотобраузера
Давайте подивимося на список усіх доступних параметрів Photo Browser:
Параметр | За замовчуванням | Опис | Тип |
---|---|---|---|
photos | [] | Масив із URL-адресами фотографій або масив об’єктів із властивостями «url» (або «html» ) і «caption» . | array |
thumbs | [] | Масив із URL-адресами зображень ескізів. Не відображатиме значки, якщо не вказано, або якщо масив порожній | array |
exposition | true | Увімкніть режим вимкнення експозиції, натиснувши «Фотобраузер». | boolean |
expositionHideCaptions | false | Установіть значення true , якщо ви також хочете приховати підписи в режимі експозиції | boolean |
swipeToClose | true | Якщо цей параметр увімкнено, ви можете закрити фотобраузер, провівши пальцем (свайп) угору/вниз | boolean |
popupPush | false | Вмикає спливаюче вікно браузера фотографій, щоб відкривати перегляди позаду | boolean |
routableModals | false | Буде додано відкритий браузер фотографій до історії маршрутизатора, що дає можливість закрити браузер фотографій, повернувшись до історії маршрутизатора та встановивши поточний маршрут до режиму перегляду фотографій
| boolean |
url | photos/ | Модальна URL-адреса браузера фотографій, яку буде встановлено як поточний маршрут | string |
view | Посилання на ініціалізований екземпляр View , якщо ви хочете використовувати тип браузера фотографій "сторінка" або де встановити маршрутизацію, коли routableModals ввімкнено. За замовчуванням, якщо не вказано, його буде відкрито в головному вікні.
| object | |
type | standalone | Визначте, як відкривати Photo Browser. Може бути standalone (відкриється як накладення з користувацьким ефектом переходу), popup (відкриється як спливаюче вікно ), page (буде введено у View та завантажено як нову сторінку). | string |
theme | light | Кольорова тема фотобраузера, може бути light або dark | string |
captionsTheme | Тема кольорів підписів, також може бути light або dark . За замовчуванням дорівнює параметру theme
| string | |
navbar | true | Установіть значення false , щоб видалити панель навігації фотобраузера | boolean |
toolbar | true | Установіть значення false , щоб видалити панель інструментів фотобраузера | boolean |
pageBackLinkText | Back | Текст на зворотному посиланні на панелі навігації Photo Browser | string |
popupCloseLinkText | Close | Текст на закритому посиланні на навігаційній панелі фотобраузера, коли його відкривають у спливаючому вікні або як автономний | string |
navbarShowCount | undefined | Визначає, чи відображатиметься текст "3 із 5" у заголовку панелі навігації чи ні. Якщо не вказано (не визначено), цей текст буде показано, якщо є більше ніж 1 елемент | boolean |
navbarOfText | 'of' | Текст "з" у лічильнику фотографій: "3 з 5" | string |
iconsColor | Один із кольорів за замовчуванням | string |
Параметр | Опис | Тип |
---|---|---|
swiper | Параметри swiper. За замовчуванням наступні: | object |
swiper: {
initialSlide: 0,
spaceBetween: 20,
speed: 300,
loop: false,
preloadImages: true,
keyboard: {
enabled: true,
},
navigation: {
nextEl: '.photo-browser-next',
prevEl: '.photo-browser-prev',
},
zoom: {
enabled: true,
maxRatio: 3,
minRatio: 1,
},
lazy: {
enabled: true,
},
},
Параметр | За замовчуванням | Опис | Тип |
---|---|---|---|
virtualSlides | true | Якщо ввімкнено, Swiper використовуватиме віртуальні слайди | boolean |
closeByBackdropClick | true | Якщо ввімкнено, спливаюче вікно браузера фотографій закриватиметься після натискання фону | boolean |
Функції візуалізації
Параметр | Опис | Тип |
---|---|---|
renderNavbar | Функція для відтворення навігаційної панелі має повертати HTML-рядок навігаційної панелі | function |
renderToolbar | Функція для візуалізації панелі інструментів має повертати рядок HTML панелі інструментів | function |
renderCaption | Функція для рендерингу окремого підпису має повертати HTML-рядок підпису | function(caption, index) |
renderObject | Функція візуалізації фотооб’єкта має повертати HTML-рядок фотооб’єкта | function(photo, index) |
renderLazyPhoto | Функція рендерингу відкладено завантаженого фотослайду має повертати рядок HTML слайда | function(photo, index) |
renderPhoto | Функція для візуалізації фотографії як слайда, який гортає, має повертати рядок HTML слайда | function(photo, index) |
renderPage | Функція візуалізації сторінки фотобраузера має повертати повний рядок макета HTML сторінки | function |
renderPopup | Функція відтворення спливаючого вікна фотобраузера має повертати повний рядок макета HTML спливаючого вікна | function |
renderStandalone | Функція для рендерингу автономного модального фотобраузера має повертати повний модальний рядок макета HTML | function |
Події
Параметр | Опис | Тип |
---|---|---|
on | Об'єкт з обробниками подій. Наприклад: | object |
var photoBrowser = app.photoBrowser.create({
...
on: {
opened: function () {
console.log('photo browser opened')
}
}
})
Зауважте, що всі наведені нижче параметри можна використовувати в глобальних параметрах застосунку
photoBrowser
властивості, щоб установити значення за замовчуванням для всіх браузерів фотографій. Наприклад:var app = new Techno4({
photoBrowser: {
type: 'popup',
}
});
Масив фотографій
Коли ми ініціалізуємо Photo Browser, нам потрібно передати масив із фото/відео в параметрі
photos
. Давайте розглянемо різні варіанти цього масиву:// Якщо нам потрібен фотобраузер лише з фотографіями, ми можемо передати масив із URL-адресами рядків:
var photos = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
];
Якщо нам потрібно використовувати підпис для деяких фотографій, то кожна фотографія повинна бути представлена як об'єкт:
object:
var photos = [
{
url: 'image1.jpg',
caption: 'Caption 1'
},
{
url: 'image2.jpg',
caption: 'Second Caption'
},
// Це буде без підпису
{
url: 'image3.jpg',
},
// Цей також буде без підпису
'image4.jpg'
];
Якщо нам потрібно використовувати відео в деяких слайдах, нам потрібно передати елемент HTML елемента
video
або iframe
у властивість "html"
:var photos = [
{
url: 'image1.jpg',
caption: 'Caption 1'
},
// Елемент відео з підписом
{
html: '<video src="video1.mp4"></video>',
caption: 'Video Caption'
},
// Це вбудоване відео без субтитрів
{
html: '<iframe src="..."></iframe>',
},
// Це також буде відео без субтитрів
'<video src="video2.mp4"></video>'
];
Методи та властивості фотобраузера
Після ініціалізації Photo Browser у нас є його ініціалізований екземпляр у змінній (як
photoBrowser
у прикладах вище) з корисними методами та властивостями:Властивості
Властивість | Опис |
---|---|
photoBrowser.app | Посилання на глобальний екземпляр застосунку |
photoBrowser.el | HTML-елемент фотобраузера |
photoBrowser.$el | Екземпляр Dom64 з елементом HTML Photo Browser |
photoBrowser.activeIndex | Індексний номер поточного активного фотослайду |
photoBrowser.exposed | true якщо Photo Browser у режимі експозиції |
photoBrowser.opened | true якщо зараз відкрито фотобраузер |
photoBrowser.url | URL-адреса браузера фотографій (передана в url параметрі) |
photoBrowser.view | Перегляд фотографій у браузері (переданий у view параметрі) або знайдений батьківський перегляд |
photoBrowser.swiper | Містить ініціалізований екземпляр Swiper з усіма доступними методами та властивостями Swiper |
photoBrowser.params | Об'єкт з параметрами ініціалізації |
Методи
Метод | Опис |
---|---|
photoBrowser.open( index ) | Відкрийте Photo Browser на фотографії з індексним номером, що дорівнює параметру «index» . Якщо параметр «index» не вказано, воно буде відкрито на останній закритій фотографії. |
photoBrowser.close( ) | Закрити фотобраузер |
photoBrowser.expositionToggle( ) | Перемкнути режим експозиції |
photoBrowser.expositionEnable( ) | Увімкнути режим експозиції |
photoBrowser.expositionDisable( ) | Вимкнути режим експозиції |
photoBrowser.destroy( ) | Знищити екземпляр фотобраузера |
photoBrowser.on( event, handler ) | Додати обробник подій |
photoBrowser.once( event, handler ) | Додати обробник подій, який буде видалено після запуску |
photoBrowser.off( event, handler ) | Видалити обробник подій |
photoBrowser.off( event ) | Видалити всі обробники для вказаної події |
photoBrowser.emit( event, ...args ) | Запустити подію на екземплярі |
Події Фотобраузера
Фотобраузер запускатиме такі події DOM для елемента фотобраузера та події для застосунку та екземпляра фотобраузера:
Події DOM
Подія | Об'єкт | Опис |
---|---|---|
photobrowser:open | Елемент Photo Browser | Подія буде ініційована, коли Photo Browser запустить початкову анімацію |
photobrowser:opened | Елемент Photo Browser | Подію буде запущено після того, як Photo Browser завершить свою початкову анімацію |
photobrowser:close | Елемент Photo Browser | Подія буде ініційована, коли фотобраузер почне завершувати анімацію |
photobrowser:closed | Елемент Photo Browser | Подію буде запущено після того, як Photo Browser завершить свою анімацію закриття |
photobrowser:beforedestroy | Елемент Photo Browser | Подія буде запущена безпосередньо перед тим, як екземпляр Photo Browser буде знищено |
Події екземплярів застосунку та фотобраузера
Екземпляр Photo Browser запускає події як у себе, так і в екземплярі застосунку . Події екземплярів застосунку мають ті самі назви з префіксом
photoBrowser
.Подія | Опис | Об'єкт |
---|---|---|
swipeToClose | Подія запускається, коли користувач закриває браузер фотографій, проводячи вгору/вниз. | photoBrowser |
tap | Подія Swiper . Подія запускається, коли користувач натискає Swiper. Отримує подію touchend як аргумент. | photoBrowser |
click | Подія Swiper . Подія запускається, коли користувач натискає Swiper. Отримує подію touchend як аргумент. | photoBrowser |
doubleTap | Подія Swiper . Подія буде запущена, коли користувач двічі торкнеться контейнера Swiper. Отримує подію touchend як аргумент | photoBrowser |
doubleClick | Подія Swiper . Подія буде запущена, коли користувач двічі натисне контейнер Swiper. Отримує подію touchend як аргумент | photoBrowser |
slideChange | Подія Swiper . Подія буде запущена, коли поточний активний слайд буде змінено | photoBrowser |
transitionStart | Подія Swiper . Подія буде запущена на початку переходу. | photoBrowser |
transitionEnd | Подія Swiper . Подію буде запущено після переходу | photoBrowser |
slideChangeTransitionStart | Подія Swiper . Подія буде запущена на початку анімації на інший слайд (наступний або попередній). | photoBrowser |
slideChangeTransitionEnd | Подія Swiper . Подія буде запущена після анімації на інший слайд (наступний або попередній). | photoBrowser |
lazyImageLoad | Подія Swiper .Подія буде запущена на початку відкладеного завантаження зображення | photoBrowser |
lazyImageReady | Подія Swiper .Подія буде запущена, коли буде завантажено відкладене завантаження зображення | photoBrowser |
touchStart | Подія Swiper .Подія буде запущена, коли користувач торкнеться Swiper. Отримує подію «touchstart» як аргумент. | photoBrowser |
touchMoveOpposite | Подія Swiper .Подія буде запущена, коли користувач торкнеться й перемістить палець над Swiper у напрямку, протилежному параметру напрямку. Отримує подію «touchmove» як аргумент. | photoBrowser |
touchEnd | Подія Swiper .Подія буде запущена, коли користувач відпустить Swiper. Отримує подію touchend як аргумент. | photoBrowser |
open | Подія буде ініційована, коли Photo Browser запустить початкову анімацію. В якості аргументу обробник події отримує екземпляр photoBrowser | photoBrowser |
photoBrowserOpen | Подія буде ініційована, коли Photo Browser запустить початкову анімацію. В якості аргументу обробник події отримує екземпляр photoBrowser | app |
opened | Подію буде запущено після того, як Photo Browser завершить свою початкову анімацію. В якості аргументу обробник події отримує екземпляр photoBrowser | photoBrowser |
photoBrowserOpened | Подію буде запущено після того, як Photo Browser завершить свою початкову анімацію. В якості аргументу обробник події отримує екземпляр photoBrowser | app |
close | Подія буде ініційована, коли фотобраузер почне завершувати анімацію. В якості аргументу обробник події отримує екземпляр photoBrowser | photoBrowser |
photoBrowserClose | Подія буде ініційована, коли фотобраузер почне завершувати анімацію. В якості аргументу обробник події отримує екземпляр photoBrowser | app |
closed | Подію буде запущено після того, як Photo Browser завершить свою анімацію закриття. В якості аргументу обробник події отримує екземпляр photoBrowser | photoBrowser |
photoBrowserClosed | Подію буде запущено після того, як Photo Browser завершить свою анімацію закриття. В якості аргументу обробник події отримує екземпляр photoBrowser | app |
beforeDestroy | Подія буде запущена безпосередньо перед тим, як екземпляр Photo Browser буде знищено. В якості аргументу обробник події отримує екземпляр photoBrowser | photoBrowser |
photoBrowserBeforeDestroy | Подія буде запущена безпосередньо перед тим, як екземпляр Photo Browser буде знищено. В якості аргументу обробник події отримує екземпляр photoBrowser | app |
Змінні CSS
Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
:root {
--t4-photobrowser-bg-color: #fff;
--t4-photobrowser-bars-bg-color: rgba(var(--t4-bars-bg-color-rgb), 0.95);
--t4-photobrowser-bars-text-color: var(--t4-bars-text-color);
--t4-photobrowser-bars-link-color: var(--t4-bars-link-color);
--t4-photobrowser-caption-font-size: 13px;
--t4-photobrowser-caption-font-weight: 500;
--t4-photobrowser-caption-light-text-color: #000;
--t4-photobrowser-caption-dark-text-color: #fff;
--t4-photobrowser-exposed-bg-color: #000;
--t4-photobrowser-dark-bg-color: #000;
--t4-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
--t4-photobrowser-dark-bars-text-color: #fff;
--t4-photobrowser-dark-bars-link-color: #fff;
}
Приклади
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Photo Browser</div>
</div>
</div>
<div class="page-content">
<div class="block block-strong-ios block-outline-ios">
<p>Photo Browser is a standalone and highly configurable component that allows to open window with photo viewer
and navigation elements with the following features:</p>
<ul>
<li>Swiper between photos</li>
<li>Multi-gestures support for zooming</li>
<li>Toggle zoom by double tap on photo</li>
<li>Single click on photo to toggle Exposition mode</li>
</ul>
</div>
<div class="block block-strong-ios block-outline-ios">
<p>Photo Browser could be opened in a three ways - as a Standalone component (Popup modification), in Popup, and
as separate Page:</p>
<div class="grid grid-cols-3 grid-gap">
<a class="button button-fill" @click=${openStandalone}>Standalone</a>
<a class="button button-fill" @click=${openPopup}>Popup</a>
<a class="button button-fill" @click=${openPage}>Page</a>
</div>
</div>
<div class="block block-strong-ios block-outline-ios">
<p>Photo Browser supports 2 default themes - default Light (like in previous examples) and Dark theme. Here is a
Dark theme examples:</p>
<div class="grid grid-cols-3 grid-gap">
<a class="button button-fill" @click=${openStandaloneDark}>Standalone</a>
<a class="button button-fill" @click=${openPopupDark}>Popup</a>
<a class="button button-fill" @click=${openPageDark}>Page</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default (props, { $t4, $on }) => {
const photos = [
{
url: 'img/beach.jpg',
caption: 'Amazing beach in Goa, India'
},
'http://placekitten.com/1024/1024',
'img/lock.jpg',
{
url: 'img/monkey.jpg',
caption: 'I met this monkey in Chinese mountains'
},
{
url: 'img/mountains.jpg',
caption: 'Beautiful mountains in Zhangjiajie, China'
}
];
const thumbs = [
'img/beach.jpg',
'http://placekitten.com/1024/1024',
'img/lock.jpg',
'img/monkey.jpg',
'img/mountains.jpg'
]
let standalone;
let popup;
let page;
let standaloneDark;
let popupDark;
let pageDark;
const openStandalone = () => {
standalone.open();
}
const openPopup = () => {
popup.open();
}
const openPage = () => {
page.open();
}
const openStandaloneDark = () => {
standaloneDark.open();
}
const openPopupDark = () => {
popupDark.open();
}
const openPageDark = () => {
pageDark.open();
}
$on('pageInit', () => {
// Create PBs when page init
standalone = $t4.photoBrowser.create({
photos: photos,
thumbs: thumbs,
});
popup = $t4.photoBrowser.create({
photos: photos,
thumbs: thumbs,
type: 'popup',
});
page = $t4.photoBrowser.create({
photos: photos,
thumbs: thumbs,
type: 'page',
backLinkText: 'Back',
});
standaloneDark = $t4.photoBrowser.create({
photos: photos,
thumbs: thumbs,
theme: 'dark',
});
popupDark = $t4.photoBrowser.create({
photos: photos,
thumbs: thumbs,
type: 'popup',
theme: 'dark',
});
pageDark = $t4.photoBrowser.create({
photos: photos,
thumbs: thumbs,
type: 'page',
backLinkText: 'Back',
theme: 'dark',
});
});
$on('pageBeforeRemove', () => {
// Destroy PBs on page remove
standalone.destroy();
popup.destroy();
page.destroy();
standaloneDark.destroy();
popupDark.destroy();
pageDark.destroy();
});
return $render;
};
</script>
Techno4 Framework
- Get Started
- Introduction
- Kitchen Sink
- Installation
- Package Structure
- App HTML Layout
- RTL Layout
- Initialize App
- Events
- Router Component
- Routes
- Store
- App/Core
- Accordion/Collapsible
- Action Sheet
- Area chart
- Autocomplete
- Badge
- Block/Content Block
- Breadcrumbs
- Button
- Calendar/Date Picker
- Cards
- Checkbox
- Chips
- Color Picker
- Contact List
- Data Table
- Dialog
- Floating action button
- Form
- Gauge
- Icons
- Inputs / Form Inputs
- Grid /Layout Grid
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Navbar
- Messages
- Notification
- Panel/Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar