如何使用从数组中调用的图像创建灯箱？答案

【问题标题】：How do I create a Lightbox with images called from an array?如何使用从数组中调用的图像创建灯箱？
【发布时间】：2021-03-31 04:46:13
【问题描述】：

我正在尝试实现一个 Lightbox 库，单击图像链接会启动从数组加载的图像幻灯片，而不是从页面上的内联内容加载。我能找到的所有示例都使用一组内联图像。我正在使用一个名为 UIkit (https://https://getuikit.com/docs/introduction) 的框架，它有一个“灯箱”类。

我的 Html 看起来像这样：

<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: fade">
    <div>
        <a class="uk-inline" href="images/dark.jpg">
            <img src="images/photo.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg">
            <img src="images/dark.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/photo.jpg">
            <img src="images/light.jpg" alt="">
        </a>
    </div>
</div>

任何人都可以想出一种方法来使用从数组中调用的图像来实现灯箱，这样我们就不必在实际页面上查看每个单独的图像（一个图像链接到包含更多该主题的灯箱）以及什么JS/html 会是什么样子？

提前感谢您！对 JS 和学习仍然很陌生！ :)

【问题讨论】：

标签： javascript arrays uikit lightbox

【解决方案1】：

看起来他们有一个api you could use

const button = document.getElementById('my-button');
button.addEventListener('click', () => {

  const panel = UIkit.lightboxPanel({
    items: [
    {
        source: 'https://images.freeimages.com/images/large-previews/eb9/hot-coffee-1240214.jpg',
        caption: 'item 1'
      },
      {
        source: 'https://images.freeimages.com/images/large-previews/57a/time-2-1240218.jpg',
        caption: 'item 2'
      },
    ]
  });

  panel.show()
})

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.18/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.18/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.18/dist/js/uikit-icons.min.js"></script>

<button id="my-button">Show</button>

【讨论】：