Fancybox 无法正常工作

Question

我有一个我无法解决的问题。当我点击图片时，使用花式框放大和可视化图片，到目前为止一切都很好，但是当我点击时他把我扔到页面顶部，这是不正确的，有人知道如何旋转它吗？

链接项目 http://codetek.com.br/~barbosa/

Answer 1

有很多可能的解决方案，要么修改fancybox CSS，要么使用fancybox helpers

在您的情况下，当图像显示时单击并打开页面滚动到顶部时，

我建议在fancybox css 的fancybox-lock body 选择器中添加以下CSS 属性。

.fancybox-lock body {
    overflow: visible !important;
}

helpers 的其他解决方案是

helpers: {
    overlay: {
      locked: false
    }
}

旁注：您正在使用 id 来触发 fancybox $("#single_2").fancybox({ 和 HTML

<div class="circle-box">
    <a id="single_2" href="portfolio/img2.jpg" title="none1">
        <img src="img2.jpg" alt="none1" />
    </a>
</div>
<div class="circle-box">
    <a id="single_2" href="portfolio/img3.jpg" title="none1">
        <img src="img3.jpg" alt="none1" />
    </a>
</div>

id 必须是唯一的，因此将 fancybox 触发器更改为 $(".single_2").fancybox({ 和 HTML

<div class="circle-box">
    <a class="single_2" href="portfolio/img2.jpg" title="none1">
        <img src="portfolio/img2.jpg" alt="none1" />
    </a>
</div>
<div class="circle-box">
    <a class="single_2" href="portfolio/img3.jpg" title="none1">
        <img src="portfolio/img3.jpg" alt="none1" />
    </a>
</div>

其余图像的更改相同。