前端之家

  1. 首页
  2. 问答

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

• 问答

我正在尝试实现一个灯箱画廊，其中单击图像链接会启动从数组加载的图像的幻灯片，而不是从页面上的内嵌内容加载的图像。我能找到的所有示例都使用一组内嵌图像。我正在使用一个名为 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 和学习还是新手！ :)

onlid 回答：如何使用从数组调用的图像创建灯箱？

看起来他们有一个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>

arraysjavascriptlightboxuikit
本文链接：https://www.f2er.com/663817.html

大家都在问