Bento

Bento Lightbox 圖庫

<head>

    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
    <link
      rel="stylesheet"
      href="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.js"
    ></script>
    <style>
      .body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
          'Segoe UI Symbol';
        background: #ecf1f3;
      }
      .image-grid {
        display: grid;
        grid-template-columns: 50vw 50vw;
        grid-gap: 10px;
        margin: 2rem 0;
      }
    </style>
</head>

<body>

    <bento-lightbox-gallery></bento-lightbox-gallery>
    <section class="image-grid">
      <figure>
        <img
          width="160"
          height="120"
          src="https://picsum.photos/id/237/640/480"
          lightbox
        />
        <figcaption>A random image</figcaption>
      </figure>
      <figure>
        <img
          width="160"
          height="120"
          src="https://picsum.photos/id/238/640/480"
          lightbox
        />
        <figcaption>Another random image</figcaption>
      </figure>
      <figure>
        <img
          width="160"
          height="120"
          src="https://picsum.photos/id/239/640/480"
          lightbox
        />
        <figcaption>And another random image</figcaption>
      </figure>
      <figure>
        <img
          width="160"
          height="120"
          src="https://picsum.photos/id/240/640/480"
          lightbox
        />
        <figcaption>Aaaand another random image</figcaption>
      </figure>
    </section>
</body>

提供圖片的 Modal 式「Lightbox」體驗。

當使用者與元素互動時，一個 Modal 將會展開，覆蓋整個視窗，直到使用者關閉為止。

使用 bento-lightbox-gallery 作為網路元件或 React 函數式元件

↓ 網路元件 ↓ React / Preact

網路元件

您必須包含每個 Bento 元件所需的 CSS 函式庫才能保證正確載入，並在加入自訂樣式之前執行此項步驟。作為網路元件

透過 npm 匯入

npm install @bentoproject/lightbox-gallery
import {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';
defineBentoLightboxGallery();

透過 <script> 匯入

<script type="module" async src="https://cdn.ampproject.org/bento.mjs"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.css"
>
<script type="module" async src="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.mjs"></script>
<script nomodule async src="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.js"></script>

範例

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.js"
    ></script>
</head>

<body>

<bento-lightbox-gallery></bento-lightbox-gallery>
    <figure>
      <img id="my-img" src="img1.jpwg" lightbox />
      <figcaption>dog wearing yellow shirt.</figcaption>
    </figure>
    <figure>
      <img src="img2.jpeg" lightbox/>
    </figure>
    <figure>
      <img src="img2.jpeg" lightbox/>
    </figure>
</body>

若要使用 bento-liightbox-gallery，請確定在 <head> 區段中包含所需的程式碼，然後在 <img> 或 <bento-carousel> 元素中新增 lightbox 屬性。

新增標題

或者，您可以為 Lightbox 中的每個元素指定標題。這些欄位會由 <bento-lightbox-gallery> 自動讀取並顯示，其優先順序如下：

  • figcaption （如果 Lightbox 元件為圖說的子代元素）
  • aria-describedby
  • alt
  • aria-label
  • aria-labelledby

在以下範例中，<bento-lightbox-gallery> 會將 figcaption 值顯示為其說明，顯示「多倫多 CN 塔是....」。

<figure>
  <img
    id="hero-img"
    lightbox="toronto"
    src="https://picsum.photos/1600/900?image=1075"
    alt="picture of cn tower."
  />
  <figcaption class="image">
    toronto's cn tower was built in 1976 and was the tallest free-standing
    structure until 2007.
  </figcaption>
</figure>

在以下範例中，<bento-lightbox-gallery> 會將 alt 值顯示為其說明，顯示「CN 塔圖片」。

<img
  id="hero-img"
  lightbox="toronto"
  src="https://picsum.photos/1600/900?image=1075"
  alt="picture of cn tower"
/>

互動性和 API 用法

Bento 元件透過其 API 具有高度的互動性。若要在文件中包含以下指令碼標籤，即可存取 bento-lightbox-gallery 元件 API

await customElements.whenDefined('bento-lightbox-gallery');
const api = await lightboxGallery.getApi();

動作

bento-lightbox-gallery API 讓您可以執行以下動作：

開啟

開啟 Lightbox 圖庫。

api.open();

您可以透過傳入其他參數將特定 Lightbox 圖庫組開啟至特定幻燈片

api.open(1, 'toronto') // opens gallery with images in the "toronto" group to the 2nd image
api.open(null, 'toronto') // opens gallery with images in the "toronto" group to the 1st image

屬性

將 lightbox 屬性設定為 ID，以將不同影像指定給不同組別。例如，在以下範例中，點選任何 group1 影像將只會顯示 img1.jpeg、img3.jpeg 和 img5.jpeg，而點選任何 group2 影像將只會顯示 img2.jpeg、img4.jpeg 和 img6.jpeg

<img src="img1.jpeg" lightbox="group1">
<img src="img2.jpeg" lightbox="group2">
<img src="img3.jpeg" lightbox="group1">
<img src="img4.jpeg" lightbox="group2">
<img src="img5.jpeg" lightbox="group1">
<img src="img6.jpeg" lightbox="group2">

版面和樣式

每個 bento 組件都有您必須包含的一個小型 css 函式庫，以確保正確載入且不出現內容變動。由於基於訂單具體性，您必須手動確保在任何自訂樣式之前已包含樣式表。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.css"
/>

Preact/React 元件

bentolightboxgallery 的 preact/react 版本與網頁元件版本的功能不同。以下範例將展示如何將 <BentoLightboxGallery> 用作功能元件。

透過 npm 匯入

npm install @bentoproject/lightbox-gallery
import React from 'react';
import {
  BentoLightboxGalleryProvider,
  WithBentoLightboxGallery,
} from '@bentoproject/lightbox-gallery/react';

function App() {
  return (
    <BentoLightboxGalleryProvider>
      <WithBentoLightboxGallery>
        <img src="https://images.unsplash.com/photo-1562907550-096d3bf9b25c" />
      </WithBentoLightboxGallery>
    </BentoLightboxGalleryProvider>
  );
}

使用 BentoBaseCarousel 的範例

<BentoLightboxGallery> 可與 <BentoBaseCarousel> 子項一起使用，以顯示輪播的所有子項。當您瀏覽 lightbox 中的輪播項目時，原始輪播幻燈片會同步，因此在 lightbox 關閉時，使用者會回到最初所在同一幻燈片。

import React from 'react';
import {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';
import {
  BentoLightboxGalleryProvider,
  WithBentoLightboxGallery,
} from '@bentoproject/lightbox-gallery/react';

function App() {
  return (
    <BentoLightboxGalleryProvider>
      <BentoBaseCarousel lightbox style={{width: 240, height: 160}}>
        <img
          src="https://images.unsplash.com/photo-1562907550-096d3bf9b25c"
          thumbnailSrc="https://images.unsplash.com/photo-1562907550-096d3bf9b25c"
        />
      </BentoBaseCarousel>
    </BentoLightboxGalleryProvider>
  );
}

有關如何使用 BentoLightboxGallery 的更多範例，請查看 (Basic.js)[./storybook/Basic.js] 中的故事範例。

BentoLightboxGalleryProvider 的 Props

onBeforeOpen

一個 Props，其中包含一個在 lightbox 開啟前執行的函式。

onAfterOpen

一個 Props，其中包含一個在 lightbox 開啟後執行的函式。

onAfterClose

一個 Props，其中包含一個在 lightbox 關閉後執行的函式。

onViewGrid

一個 Props，其中包含一個在使用者進入網格檢視時執行的函式。

onToggleCaption

一個 Props，其中包含一個在切換內文時執行的函式。

WithBentoLightboxGallery 的 Props

enableActivation

預設為 true 的布林值 Props，讓子影像啟動 lightbox 體驗。

onClick

一個 Props，其中包含一個在按一下影像時執行的函式。

我們會在本網站上放置 Cookie，以分析流量和最佳化您的體驗。
更多詳細資料