Fancybox无法正常工作

时间:2015-09-30 16:45:01

标签: fancybox

我有一个我无法解决的问题。当我点击图片时使用fancybox放大并可视化图片,到目前为止一直很好但是当我点击他将我扔到页面顶部并且这不正确时,是否有人知道如何旋转它?

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

1 个答案:

答案 0 :(得分:0)

有许多可能的解决方案,可以修改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>

其他图像的相同更改。