html - 在HTML5/CSS3中实现imagelightbox.js

对此非常新，如果我要问的是很奇怪的事情，对不起。

我正在尝试在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>

在这种情况下，点击图片确实会链接到其全屏版本，但是找不到灯箱。

任何帮助将不胜感激！

最佳答案

您在那里可能有冲突。从img中删除ID。 #imagelightbox规则适用于灯箱叠加层而不是链接的图像。默认情况下，init JS函数处理所有图像链接。