在前端javascript网站中弹出图片

popup pictures in a Front end javascript website

本文关键字：前端 javascript 网站      更新时间：2024-06-16

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

我在玩我在网上找到的一个模板，我试图在模板上使用另一个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>
<!-- ... -->

如有任何帮助，将不胜感激。提前谢谢。。

这是因为在类中使用了逗号。类应该看起来像这样：

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

在HTML中定义类时不使用逗号。此外，请记住，如果遇到1个ID，则只能使用该ID。

相关文章：