Skip to main content

Браузер фотографій

Photo Browser — це компонент перегляду фотографій для відображення колекції фотографій / зображень. Фотографії можна масштабувати та панорамувати (необов’язково). Photo Browser використовує компонент Swiper Slider для ковзання між фотографіями.

Методи застосунку Фотобраузер

Давайте розглянемо пов’язані методи роботи застосунку Photo Browser:
МетодОпис
app.photoBrowser.create(parameters)
створити екземпляр Photo Browser

parameters - object. Об'єкт з параметрами фотобраузера

Метод повертає створений екземпляр Photo Browser

app.photoBrowser.destroy(el)
знищити екземпляр Photo Browser

el - HTMLElement or string (with CSS Selector) or object. Photo Browser або екземпляр Photo Browser для знищення.

app.photoBrowser.get(el)
отримати екземпляр Photo Browser за елементом HTML

el - HTMLElement or string (with CSS Selector).Елемент Photo Browser.

Метод повертає екземпляр 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>