在前端javascript网站上弹出图片

Question

我在寻求一些帮助来解决我所遇到的问题.

我正在玩我在网上找到的一个模板，我试图使用模板上的另一个JavaScript脚本来改变图片的行为，一旦点击它就会显示一个带有图片的模式弹出。它的脚本名为fancybox (还有许多其他的脚本也做了同样的事情，也尝试过它们，结果也是一样的)但是，一旦我将fancybox类应用到图片标签上，它就会破坏图片和布局的大小。所有的图片开始互相重叠，占据了整个屏幕。此外，我还在网站中加入了js和css链接，这不是问题所在，所以请不要问它。谢谢

可以找到模板和scirpt的位置是：http://tympanus.net/codrops/2014/12/23/sliding-header-layout/ http://fancybox.net/

此外，下面是我应用fancybox类标记的代码

​

<a href="img/item01.jpg" class="item, fancybox">
    <img class="item__image" src="img/item01.jpg" alt="item01"/>
    <h2 class="item__title">Magnificence</h2>
</a>

<a href="img/item02.jpg" class="item, fancybox">
    <img class="item__image" src="img/item02.jpg" alt="item02"/>
    <h2 class="item__title">Electrifying</h2>
</a>

<!-- ... -->

​

任何帮助，都将不胜感激。提前谢谢..。

Answer 1

这是因为你在课堂上使用逗号。相反，类应该如下所示：

<a href="img/item01.jpg" class="item fancybox">

在HTML中定义类时不使用逗号。另外，请记住，如果遇到这种情况，您只能使用1 ID。