v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

フォトブラウザ

    Photo Browserは、写真や画像のコレクションを表示するフォトブラウザコンポーネントです。写真はズームやパンをすることができます（オプション）。

    Photo Browserは、Swiper Sliderコンポーネントを使用して、写真間のスライドを行います。

    フォトブラウザのアプリのメソッド

    Photo Browserに関連するアプリのメソッドを見てみましょう。

    app.photoBrowser.create(parameters)- Photo Browserのインスタンス作成

    • parameters - object. フォトブラウザのパラメータを持つオブジェクト

    作成したフォトブラウザのインスタンスを返すメソッド

    app.photoBrowser.destroy(el)- フォトブラウザのインスタンスの破棄

    • el - HTMLElementまたはstring（CSSセレクタ付き）またはobject。壊すPhoto Browser要素またはPhoto Browserインスタンスを指定します。

    app.photoBrowser.get(el)- HTML要素でフォトブラウザのインスタンスを取得

    • el - HTMLElement または string (CSS Selectorを使用). Photo Browserの要素。

    メソッドはPhoto Browserのインスタンスを返します。

    例：

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

    フォトブラウザのパラメータ

    フォトブラウザで利用可能なパラメータの一覧を見てみましょう。

    ParameterTypeDefaultDescription
    photosarray[]写真のURLを含む配列、または "url"(または "html")と "caption "プロパティを持つオブジェクトの配列です。
    expositionbooleantrueフォトブラウザをクリックしたときの露出モードを無効にする。
    expositionHideCaptionsbooleanfalse露出モードでキャプションも非表示にする場合はtrueに設定します。
    swipeToClosebooleantrueこのパラメータを有効にすると、フォトブラウザを上下にスワイプして閉じることができます。
    popupPushbooleanfalseフォトブラウザのポップアップを有効にして、開いたときにビュー/Sを後ろに押します。
    routableModalsbooleanfalse開いたフォトブラウザをルーターの履歴に追加します。これにより、ルーターの履歴に戻ってフォトブラウザを閉じることができ、現在のルートをフォトブラウザのモーダルに設定できます。
    urlstringphotos/現在のルートとして設定されるフォト・ブラウザ・モーダルのURL
    viewobjectpage" フォトブラウザタイプを使用する場合は初期化された View インスタンスへのリンク、または routableModals が有効な場合はルーティングを設定する場所。デフォルトでは、指定がなければ、メインビューで開かれます。
    typestringstandaloneフォトブラウザがどのように開かれるかを定義します。standalone (カスタムのトランジション効果を持つオーバーレイとして開かれる)、popup (<a href="popup.html">popup</a>として開かれる)、page` (ビューに注入され、新しいページとしてロードされる)などが考えられます。
    themestringlightフォトブラウザのカラーテーマは、lightまたはdarkです。
    captionsThemestringキャプションのカラーテーマ、これも light または dark になります。デフォルトでは、theme パラメータと同じです。
    navbarbooleantruefalseに設定すると、フォトブラウザのナビゲーションバーが削除されます。
    toolbarbooleantrueフォトブラウザのツールバーを削除するには、falseに設定します。
    pageBackLinkTextstringBackフォトブラウザのナビバーにあるバックリンクのテキスト
    popupCloseLinkTextstringCloseポップアップまたはスタンドアロンで開いたときに、フォトブラウザのナビバーの閉じるリンクに表示されるテキスト
    navbarShowCountbooleanundefinedナビバーのタイトルに「3 of 5」のテキストを表示するかどうかを定義します。指定されていない（未定義）場合は、アイテムが1つ以上ある場合にこのテキストを表示します。
    navbarOfTextstring'of'写真カウンターの "of "のテキスト。"3 of 5"
    iconsColorstringデフォルトカラーのいずれかを指定します。
    swiperobjectスワイパーのパラメータです。デフォルトでは次のようになります。
    swiper: {
  initialSlide: 0,
  spaceBetween: 20,
  speed: 300,
  loop: false,
  preloadImages: true,
  navigation: {
    nextEl: '.photo-browser-next',
    prevEl: '.photo-browser-prev',
  },
  zoom: {
    enabled: true,
    maxRatio: 3,
    minRatio: 1,
  },
  lazy: {
    enabled: true,
  },
},
    virtualSlidesbooleantrue有効にすると、Swiperは仮想スライドを使用します。
    Render functions
    renderNavbarfunctionナビバーをレンダリングする関数は、ナビバーのHTML文字列を返さなければなりません。
    renderToolbarfunctionツールバーをレンダリングするための関数は、ツールバーのHTML文字列を返す必要があります。
    renderCaptionfunction(caption, index)単一のキャプションをレンダリングする関数は、キャプションのHTML文字列を返す必要があります。
    renderObjectfunction(photo, index)フォトオブジェクトをレンダリングする関数は、フォトオブジェクトHTML文字列を返さなければなりません。
    renderLazyPhotofunction(photo, index)遅延ロードされた写真のスライドを表示する機能は、slideを返す必要があります。
    renderPhotofunction(photo, index)フォトをスワイパースライドとして表示する機能は、slideを返す必要があります。
    renderPagefunctionフォトブラウザページを描画する機能は、フルページHTMLレイアウトを返さなければなりません。
    renderPopupfunctionフォトブラウザのポップアップを描画する機能で、フルポップアップのHTMLレイアウト文字列を返す必要があります。
    renderStandalonefunctionフォトブラウザのスタンドアロンモーダルをレンダリングする機能は、フルモーダルのHTMLレイアウト文字列を返す必要があります。
    Events
    onobject

    イベントハンドラーを持つオブジェクト。例えば、以下のようになります。

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

    以下のすべてのパラメータは、アプリのグローバルパラメータの photoBrowser プロパティで使用でき、すべてのフォトブラウザのデフォルト値を設定できます。例えば、以下のようになります。

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

    写真の配列

    フォトブラウザを初期化する際には、photosパラメータに写真や動画を含む配列を渡す必要があります。この配列の様々なバリエーションを見てみましょう。

    // 写真だけのフォトブラウザが必要な場合は、文字列のURLで配列を渡すことができます。
var photos = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    'image4.jpg',
];

//写真の一部にキャプションを使用する必要がある場合は、各写真をオブジェクトとして提示します。
var photos = [
    {
        url: 'image1.jpg',
        caption: 'Caption 1'
    },
    {
        url: 'image2.jpg',
        caption: 'Caption 1'
    },
    // この写真はキャプションなしです。
    {
        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>'
];

    フォトブラウザのメソッドとプロパティ

    フォトブラウザを初期化すると、その初期化されたインスタンスが変数(上記の例では photoBrowser 変数)に格納され、便利なメソッドやプロパティが用意されます。

    Properties
    photoBrowser.appグローバルアプリのインスタンスへのリンク
    photoBrowser.elフォトブラウザのHTML要素
    photoBrowser.$elフォトブラウザのHTML要素を持つDom7インスタンス
    photoBrowser.activeIndex現在アクティブなフォトスライドのインデックス番号
    photoBrowser.exposedフォトブラウザが露出モードの場合は、true。
    photoBrowser.openedフォトブラウザが現在開かれている場合は、trueとなります。
    photoBrowser.urlフォトブラウザのURL (url パラメータで渡されたもの)
    photoBrowser.viewフォトブラウザのビュー（viewパラメータで渡されたもの）、または見つかった親ビュー
    photoBrowser.swiper利用可能なすべての Swiper メソッドとプロパティを持つ、初期化された Swiper インスタンスが含まれています。
    photoBrowser.params初期化パラメータを持つオブジェクト
    Methods
    photoBrowser.open(index)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 イベント

    EventTargetDescription
    photobrowser:openPhoto Browser Elementフォトブラウザがオープニングアニメーションを開始したときにイベントが発生します。
    photobrowser:openedPhoto Browser Elementイベントは、フォトブラウザがオープニングアニメーションを完了した後に発生します。
    photobrowser:closePhoto Browser Elementイベントは、フォトブラウザが閉じるアニメーションを開始したときに発生します。
    photobrowser:closedPhoto Browser Elementイベントは、フォトブラウザが閉じるアニメーションを完了した後に発生します。
    photobrowser:beforedestroyPhoto Browser ElementPhoto Browserのインスタンスが破壊される直前にイベントが発生する

    アプリとフォトブラウザのインスタンスのイベント

    Photo Browser インスタンスは、self インスタンスと app インスタンスの両方でイベントを発行します。アプリのインスタンスのイベントは、同じ名前でプレフィックスが photoBrowser となっています。

    EventTargetDescription
    swipeToClosephotoBrowserユーザーがフォトブラウザを上下にスワイプして閉じると、イベントが発生します。
    tapphotoBrowserスワイパーイベント。ユーザーがSwiperをクリック/タップするとイベントが発生します。引数として'touchend'イベントを受け取ります。
    clickphotoBrowserSwiperのイベント. ユーザーがSwiperをクリック/タップしたときにイベントが発生します。引数として 'touchend' イベントを受け取ります。
    doubleTapphotoBrowserSwiperイベント. ユーザーがSwiperのコンテナをダブルタップするとイベントが発生します。引数として 'touchend' イベントを受け取ります。
    doubleClickphotoBrowserSwiperのイベント. ユーザーがSwiperのコンテナをダブルタップするとイベントが発生します。引数として 'touchend' イベントを受け取ります。
    slideChangephotoBrowserSwiperイベント. 現在アクティブなスライドが変更されたときにイベントが発生します
    transitionStartphotoBrowserスワイパーイベント. 遷移の最初にイベントが発生します。
    transitionEndphotoBrowserスワイパーイベント. トランジション後にイベントが発生します。
    slideChangeTransitionStartphotoBrowserスワイパーイベント. 他のスライド(次または前)へのアニメーション開始時にイベントが発生します。
    slideChangeTransitionEndphotoBrowserスワイパーイベント. 他のスライド(次または前のスライド)へのアニメーションの後にイベントが発生します。
    lazyImageLoadphotoBrowserスワイパーイベント. イベントは、画像のレイジーローディングの開始時に発生します。
    lazyImageReadyphotoBrowserスワイパーイベント. イベントは、画像の遅延読み込みが完了したときに発生します
    touchStartphotoBrowserSwiperイベント. ユーザーがSwiperにタッチするとイベントが発生します。引数として 'touchstart' イベントを受け取ります。
    touchMoveOppositephotoBrowserSwiperイベント. イベントは、ユーザーがSwiperにタッチし、指を方向パラメーターとは反対の方向に動かしたときに発生します。引数として 'touchmove' イベントを受け取ります。
    touchEndphotoBrowserSwiperイベント. ユーザーがSwiperを離したときにイベントが発生します。引数として'touchend'イベントを受け取る。
    openphotoBrowserイベントは、フォトブラウザがオープニングアニメーションを開始したときに発生します。イベントハンドラは、引数としてphotoBrowserインスタンスを受け取ります。
    photoBrowserOpenapp
    openedphotoBrowserイベントは、フォトブラウザがそのオープニングアニメーションを完了した後に発生します。引数のイベントハンドラーは、photoBrowserインスタンスを受け取ります。
    photoBrowserOpenedapp
    closephotoBrowserフォトブラウザが閉じるアニメーションを開始すると、イベントが発生します。引数のイベントハンドラーは、photoBrowserインスタンスを受け取ります。
    photoBrowserCloseapp
    closedphotoBrowserPhoto Browserが閉じた後、イベントが発生します。As an argument event handler receives photoBrowser instance
    photoBrowserClosedapp
    beforeDestroyphotoBrowserPhoto Browserのインスタンスが破棄される直前にイベントを発生させます。引数のイベントハンドラは、photoBrowserインスタンスを受け取ります。
    photoBrowserBeforeDestroyapp

    CSS Variables

    Below is the list of related CSS variables (CSS custom properties).

    Note that commented variables are not specified by default and their values is what they fallback to in this case.

    :root {
  --f7-photobrowser-bg-color: #fff;
  --f7-photobrowser-bars-bg-image: none;
  /*
  --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
  --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
  --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
  */
  --f7-photobrowser-caption-font-size: 14px;
  --f7-photobrowser-caption-light-text-color: #000;
  --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
  --f7-photobrowser-caption-dark-text-color: #fff;
  --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
  --f7-photobrowser-exposed-bg-color: #000;
  --f7-photobrowser-dark-bg-color: #000;
  --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
  --f7-photobrowser-dark-bars-text-color: #fff;
  --f7-photobrowser-dark-bars-link-color: #fff;
}

    Examples

    <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-title">Light Theme</div>
      <div class="block block-strong">
        <p><a class="button button-fill pb-standalone" href="#">Standalone</a></p>
        <p><a class="button button-fill pb-popup" href="#">Popup</a></p>
        <p><a class="button button-fill pb-page" href="#">Page</a></p>
      </div>
      <div class="block-title">Dark Theme</div>
      <div class="block block-strong row">
        <div class="col-50"><a class="button button-fill pb-standalone-dark" href="#">Standalone</a></div>
        <div class="col-50"><a class="button button-fill pb-popup-dark" href="#">Popup</a></div>
      </div>
      <div class="block block-strong"><a class="button button-fill pb-standalone-captions" href="#">With
          Captions</a></div>
      <div class="block block-strong"><a class="button button-fill pb-standalone-video" href="#">With Video</a>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $, $f7, $onMounted }) => {
    $onMounted(() => {
      /*=== Default standalone ===*/
      var myPhotoBrowserStandalone = $f7.photoBrowser.create({
        photos: [
          'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
          'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
          'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
        ]
      });
      //Open photo browser on click
      $('.pb-standalone').on('click', function () {
        myPhotoBrowserStandalone.open();
      });

      /*=== Popup ===*/
      var myPhotoBrowserPopup = $f7.photoBrowser.create({
        photos: [
          'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
          'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
          'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
        ],
        type: 'popup'
      });
      $('.pb-popup').on('click', function () {
        myPhotoBrowserPopup.open();
      });

      /*=== As Page ===*/
      var myPhotoBrowserPage = $f7.photoBrowser.create({
        photos: [
          'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
          'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
          'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
        ],
        type: 'page',
        pageBackLinkText: 'Back'
      });
      $('.pb-page').on('click', function () {
        myPhotoBrowserPage.open();
      });

      /*=== Standalone Dark ===*/
      var myPhotoBrowserDark = $f7.photoBrowser.create({
        photos: [
          'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
          'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
          'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
        ],
        theme: 'dark'
      });
      $('.pb-standalone-dark').on('click', function () {
        myPhotoBrowserDark.open();
      });

      /*=== Popup Dark ===*/
      var myPhotoBrowserPopupDark = $f7.photoBrowser.create({
        photos: [
          'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
          'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
          'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
        ],
        theme: 'dark',
        type: 'popup'
      });
      $('.pb-popup-dark').on('click', function () {
        myPhotoBrowserPopupDark.open();
      });

      /*=== With Captions ===*/
      var myPhotoBrowserCaptions = $f7.photoBrowser.create({
        photos: [
          {
            url: 'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
            caption: 'Caption 1 Text'
          },
          {
            url: 'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
            caption: 'Second Caption Text'
          },
          // This one without caption
          {
            url: 'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
          },
        ],
        theme: 'dark',
        type: 'standalone'
      });
      $('.pb-standalone-captions').on('click', function () {
        myPhotoBrowserCaptions.open();
      });

      /*=== With Video ===*/
      var myPhotoBrowserVideo = $f7.photoBrowser.create({
        photos: [
          {
            html: '<iframe src="//www.youtube.com/embed/lmc21V-zBq0" frameborder="0" allowfullscreen></iframe>',
            caption: 'Woodkid - Run Boy Run (Official HD Video)'
          },
          {
            url: 'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
            caption: 'Second Caption Text'
          },
          {
            url: 'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
          },
        ],
        theme: 'dark',
        type: 'standalone'
      });
      $('.pb-standalone-video').on('click', function () {
        myPhotoBrowserVideo.open();
      });
    })

    return $render;
  }
</script>