Question

我正在使用fancybox在照片库网站上工作。它现在正在工作，导航下一个/上一个，链接区域与箭头的位置相关联。您可以单击从每个图像的中心到箭头图像的y轴的任何位置。如果我将箭头移出并远离图像，则可点击区域随之变宽。我在css文件中这样做。我的客户想要的（出于某种原因）是能够向右/向左单击浏览器窗口的边缘，而箭头不会从照片中移出。

我该怎么做？下面是控制箭头图像位置（以base64格式）的css文件部分：

a.fancybox-prev {
left: 0px;
}

a.fancybox-next {
right: 0px;
}

上方将箭头移入或移离照片。

a.fancybox-nav span {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
margin-top: -23px;
cursor: pointer;
z-index: 8040;
}

以上与精灵和垂直定位有关。

a.fancybox-prev span {
left: 0;
background-position: 0 -50px;
}

a.fancybox-next span {
right: 0;
background-position: 0 -100px;
}

以上也改变了箭头，关闭按钮和放大图标。

我已经尝试了所有组合，现在已经好几个小时了。关于如何使浏览器窗口的整个左半部分成为“上一个”链接以及窗口右侧相同的任何想法？

柯克

Answer 1

这确实是一个奇怪的请求，但我会这样做，

首先，单击叠加层（在fancybox外面）时禁用关闭fancybox，然后

第二步，将click绑定到fancybox的 overlay ，然后检查访问者是否向左或向右点击了内容，然后调用$.fancybox.prev()或$.fancybox.next()方法因此喜欢：

$(".fancybox").fancybox({
    margin: [20, 60, 20, 60], // Increase left/right margin for arrows position
    helpers: {
        overlay: {
            closeClick: false // prevents closing when clicking overlay (outside fancybox)
        }
    },
    afterShow: function () {
        var offset = $(".fancybox-inner").offset(),
            offset_Right = offset.left + $(".fancybox-inner").width();
        $(".fancybox-overlay").css("cursor", "pointer").on("click", function (e) {
            if ( e.pageX < offset.left ) {
                $.fancybox.prev();
            } else if ( e.pageX > offset_Right ) {
                $.fancybox.next();
            }
        });
    }
});

然后你可以使用一些css将箭头放在你想要的位置。

参见 JSFIDDLE

fancybox中的导航链接区域

1 个答案: