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>

为图片提供模态“灯箱”体验。

当用户与元素交互时，模态会扩展以填充视口，直到用户关闭它。

将 bento-lightbox-gallery 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React / Preact

Web 组件

您必须包含每个 Bento 组件所需的 CSS 库，以确保在添加自定义样式之前正确加载。作为 Web 组件

通过 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 属性。

添加标题

您还可以选择为灯箱中的每个元素指定一个标题。这些字段由 <bento-lightbox-gallery> 自动读取和显示，优先级如下

figcaption（如果灯箱元素是 figure 的子元素）
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 允许您执行以下操作

`打开`

打开灯箱画廊。

api.open();

您可以通过传入额外的参数将特定的灯箱画廊组打开到特定的幻灯片

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 版本与 Web 组件版本的功能不同。以下示例将演示如何将 <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> 子项一起使用，以对旋转木马的所有子项进行灯箱处理。当你浏览灯箱中的旋转木马项目时，原始旋转木马幻灯片会同步，以便在关闭灯箱时，用户最终会停留在他们最初所在的幻灯片上。

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] 中的 storybook 示例。

`BentoLightboxGalleryProvider` 的属性

onBeforeOpen

一个属性，它采用一个函数，该函数在打开灯箱之前执行。

onAfterOpen

一个属性，它采用一个函数，该函数在打开灯箱之后执行。

onAfterClose

一个属性，它采用一个函数，该函数在关闭灯箱之后执行。

onViewGrid

一个属性，它采用一个函数，该函数在用户进入网格视图时执行。

onToggleCaption

一个属性，它采用一个函数，该函数在切换标题时执行。

`WithBentoLightboxGallery` 的属性

enableActivation

一个布尔属性，默认为 true，它允许子图像激活灯箱体验。

onClick

一个属性，它采用一个函数，该函数在单击图像时执行。

<head>

<body>

Web 组件

通过 npm 导入

通过 <script> 导入

示例

<head>

<body>

添加标题

交互性和 API 使用

操作

打开

属性

lightbox

布局和样式

Preact/React 组件

通过 npm 导入

使用 BentoBaseCarousel 的示例

BentoLightboxGalleryProvider 的属性

onBeforeOpen

onAfterOpen

onAfterClose

onViewGrid

onToggleCaption

WithBentoLightboxGallery 的属性

enableActivation

onClick

通过 `<script>` 导入

`打开`

`BentoLightboxGalleryProvider` 的属性

`WithBentoLightboxGallery` 的属性