在居中模式中打开动态生成的画廊

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 轮播标记，包括所有图像，例如：

<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>点击图库内，模态框关闭。

我期望的结果，尽可能简单，最重要的是，移动友好，是让画廊占据智能手机的整个视口（强制性），或者，如果从桌面浏览器查看，居中，与通常的背景叠加。

虽然我知道这可能很简单，但我比我应该的更挣扎。

Answer 1

更新：

您已经有模态码了吗？如果没有，您首先需要模式，然后将画廊添加到其中。如果这样做，您就可以拥有通往任何地方的锚定路径；或者添加 "close modal" 标记（这取决于您选择的模态代码）以在用户单击图像时关闭模态 window。

我认为类似于 that what you want. Right? Or maybe you can choose one of these modals 并将 owl 片段插入模态。最后一个网站提供了大量类型的模态，包括图像滑块。

这个 article gives you some options to display images in full screen mode. Here you can find another option, quite awesome! Now, if you're using Bootstrap, you can try this snippet, or this one here which is styled by this CSS 文件。

如果您没有从我给您的示例中找到任何可以满足您需求的模态代码，此 article 解释了如何使用 jQuery。

原版：

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

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

否则您将需要使用 Owl Documentation and their own onclick event.

自定义您的代码

在居中模式中打开动态生成的画廊

Open dynamically generated gallery in a centered modal

html

javascript

modal-dialog