javascript - 前端 javascript 网站中的弹出图片

Question

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

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

可以找到模板和脚本的位置是: 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。