在 HTML5/CSS3 中实现 imagelightbox.js答案

【问题标题】：Implementing imagelightbox.js in HTML5/CSS3在 HTML5/CSS3 中实现 imagelightbox.js
【发布时间】：2014-10-08 07:57:17
【问题描述】：

对此非常陌生，如果我问的是非常奇怪的问题，请见谅。

我正在尝试用 HTML5+CSS3 构建一个基本的单页响应式作品集网站，并希望使用this fluid/mobile friendly lightbox 来显示画廊。但是，我根本无法让它工作。

这是我遵循的步骤：我使用 imagelightbox 网站上提供的代码下载并加载了最新版本的 jQuery 和 imagelightbox.js，如下所示：

<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
    $( function()
    {
        $( 'a' ).imageLightbox();
    });
</script>

然后我用 ID 为“imagelightbox”的灯箱标记了我想显示的图像：

<a href="http://i.imgur.com/mBvaIk5.jpg"><img src="http://i.imgur.com/mBvaIk5.jpg" id="imagelightbox" /></a>

我将网站提供的最小 CSS 配置转换为“imagelightbox.css”并加载了它。我只是将位置从固定更改为中心，因为在固定时我的图像根本没有出现。

#imagelightbox
{
    position: center;
    z-index: 9999;

    -ms-touch-action: none;
    touch-action: none;
}

但是，当我单击图像时没有任何反应。我试图为此制作一个jsfiddle。在 jsfiddle 中单击图像确实链接到完整视图版本，但在我的情况下，除非我像这样加载 imagelightbox.js，否则什么都不会发生：

<script src="imagelightbox.js" type="txt/css" charset="utf-8"></script>

在这种情况下，单击图像会链接到其完整视图版本，但找不到灯箱。

任何帮助将不胜感激！

【问题讨论】：

标签： html image css gallery lightbox

【解决方案1】：

我可以想到一些事情，为什么您的图像根本没有出现......

1* 没有位置：css 中的中心属性....其位置：绝对/静态（默认）/固定/继承/相对等。检查此w3schools link on css positioning

2* 浏览器控制台中是否有任何错误？（右键单击->检查元素-> chrome /FF 或 F12 开发人员工具上的控制台-> IE 中的控制台）

3* 我有一种感觉，如果没有加载，那么无论是 css 还是 js 文件，甚至是图像，该文件的路径都是错误的。

希望对你有帮助

ADDENDUM:::: 这是我使用的简单代码...对我来说似乎很好

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="imagelightbox.js"></script>
<style>
    #imagelightbox
    {
        position: fixed;
        z-index: 9999;

        -ms-touch-action: none;
        touch-action: none;
    }
</style>
<script>

            $( function()
            {
                $( 'a' ).imageLightbox();
            });


</script>
</head>
<body>

        <a href="http://www.visioncritical.com/sites/default/files/blog-images/BLG_Andrew-G.-River-Sample_09.13.12.png"><img src="http://www.visioncritical.com/sites/default/files/blog-images/BLG_Andrew-G.-River-Sample_09.13.12.png" id="imagelightbox" ></a>

</body>
</html>

【讨论】：

嗨赛，非常感谢您的回复！我应该澄清一下，图像确实会加载，但单击时无法在灯箱中显示——单击时没有任何反应。 1）谢谢，将其更改为“相对”，但没有效果。 2）是的，每个带有“imagelightbox”标签的图像都有“加载资源失败：net::ERR_FILE_NOT_FOUND”错误，但本地文件路径是正确的。没有标签的其他图像（即我不想在灯箱中显示的图像）不会出现此错误。有什么想法吗？
该错误意味着系统无法定位该文件....现在对于您正在运行的网络服务器，您是提供图像的绝对路径还是相对路径到标签中的图像？并保持位置：固定。固定在这里做的是插件将图像容器放在屏幕中间。我实际上并没有进入插件代码本身，但使用 position : relative 可能会给你一些问题。
让我澄清一下固定/相对差异。我的意思是，当您有 position: fixed 时，无论您滚动如何，图像都会保持在屏幕的中心。它为您提供悬停在页面其余部分上方的图像。当您提供位置：相对时，图像将向上或向下滚动，这不是您想要实现的（我假设）。
关于图像文件的路径，您需要文件的相对路径（从您的网络服务器的根目录开始）。如果您的网络服务器位于 c:webserver/root 文件夹中，则 localhost 指的是该文件夹。因此，如果您的图像位于 c:webserver/root/images 文件夹中，那么您的相对路径是“/images”。我再次使用远程图像和本地图像在我的个人服务器上尝试了该插件，它对我来说很好。希望这可以帮助。谢谢
再次感谢您的帮助！我再次检查，它只对我尚未输入的文件路径给出错误。我尝试显示的图像已正确链接（相对）并显示。如果我将位置更改为“固定”，它们会消失。我理解你所说的“相对”问题，所以我现在把它放在“静态”上。我还发现了灯箱 /does/ 工作，但在页面底部一直打开（所以我之前错过了它！）而不是缩略图的高度。在 CSS 中提升位置似乎没有多大作用，也不是一个好的解决方案。

【解决方案2】：

你可能在那里发生冲突。从 imgs 中删除 ID。 #imagelightbox 规则适用于未链接图像的灯箱叠加层。 init JS函数默认处理所有图片链接。

【讨论】：

天哪！！！我不敢相信，但这解决了它。太感谢了！！您怎么知道链接图像不需要 ID？我认为插件网站上的 HTML 指令也将它放在链接图像后面......？无论如何，真的很高兴它现在可以工作了^_^
嗯，从 CSS 规则中可以看出，ID 仅用于唯一元素。查看演示页面。图像是根据 init JS 函数（该示例中的 data-imagelightbox）标记的。