javascript - 以居中模式打开动态生成的图库

Question

我一直在尝试制作一个动态生成的内容，一个使用来自 Imgur API 的 Owl Carousel 的居中模式的简单画廊。

这是基本的 HTML 结构:

<article id="XYZ">

    <figure class="cover">
        <img src="http://i.imgur.com/XYZ1234.jpg">
    </figure>

</article>

单击 <figure> 时会使用 API，生成包含所有图像的 Owl Carousel 标记，例如:

<div id="gallery" class="ow-carousel">
    <div class="item">
        <img class="lazyOwl" data-src="http://i.imgur.com/XYZ1234.jpg" />
    </div>

    <div class="item">
        <img class="lazyOwl" data-src="http://i.imgur.com/XYZ4567.jpg" />
    </div>


    <div class="item">
        <img class="lazyOwl" data-src="http://i.imgur.com/ABC789.jpg" />
    </div>
</div>

我想让这个#gallery而不是明显生成(在本例中是在封面照片下方)，像模式一样居中打开，并且当单击图库内的任何 <img> 时，模式已关闭。

我期望的结果，尽可能简单，最重要的是，移动友好，是让图库占据智能手机的整个视口(viewport)(强制)，或者，如果从桌面浏览器查看，则居中，并具有通常的背景覆盖。

虽然我知道这可能很简单，但我的挣扎超出了应有的程度。

Answer 1

更新:

您已经有模态代码吗？如果没有，您首先需要模态，然后将图库添加到其中。如果你这样做了，你就可以拥有通往任何你想去的地方的 anchor 路径；或者添加“关闭模式”标记(这取决于您选择的模式代码)以在用户单击图像时关闭模式窗口。

我相信这就是您想要的 that 之类的东西。正确的？或者，也许您可​​以选择其中之一 modals 并将 owl 片段插入模态中。最后一个网站提供了大量很棒的模式类型，包括图像 slider 。

这个 article 为您提供了一些以全屏模式显示图像的选项。在这里你可以找到 another option ，非常棒!现在，如果您使用 Bootstrap，您可以尝试这个 snippet ，或者由这个 here 文件设置样式的 CSS 。

如果您在我给您的示例中找不到任何可以满足您需求的模态代码，这个 article 解释了如何使用 jQuery 来做到这一点。

<小时/>

原文:

也许这会有所帮助: <a href="path.html"><img class="lazyOwl" data-src="http://i.imgur.com/ABC789.jpg" /></a> 。

或者可能向图像添加 onclick 事件，例如 here 。

否则，您将需要使用 Owl Documentation 和他们自己的 onclick event 自定义代码。