Навігація

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

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

var photoBrowser = app.photoBrowser.create({
  photos: [
    'path/to/photo-1.jpg',
    'path/to/photo-2.jpg'
  ],
});

Параметри фотобраузера

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,
  },
},

Функції візуалізації

Події

var photoBrowser = app.photoBrowser.create({
  ...
  on: {
    opened: function () {
      console.log('photo browser opened')
    }
  }
})

var app = new Techno4({
  photoBrowser: {
    type: 'popup',
  }
});

Масив фотографій

// Якщо нам потрібен фотобраузер лише з фотографіями, ми можемо передати масив із 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'
];

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>'
];

Методи та властивості фотобраузера

Властивості

Методи

Події Фотобраузера

Події DOM

Події екземплярів застосунку та фотобраузера

Змінні 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>