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

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

虽然我知道这可能很简单，但我的努力程度超出了我的预期。

Answer 1

更新

你有模态代码吗？如果没有，您首先需要模态，然后将库添加到其中。如果您这样做，您可以在任何地方找到锚路径;或添加“关闭模态”标记（这取决于您选择的模态代码），以便在用户单击图像时关闭模态窗口。

我相信你想要的是that。对？或者您可以选择其中一个modals并将猫头鹰片段插入模态中。最后一个网站提供了大量类型的模态，包括图像滑块。

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

如果你没有找到我满足你需求的那些例子的模态代码，这个article解释了如何用jQuery来做。

ORIGINAL：

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

或者可能会在图片中添加onclick个事件，例如here。

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

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

1 个答案: