2

我正在使用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;
}

上面还更改了箭头、关闭按钮和放大图标。

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

柯克

4

1 回答 1

2

这确实是一个奇怪的要求，但我愿意，

首先，在单击叠加层（fancybox 之外）时禁用关闭fancybox，以及

其次，将 a 绑定click到 fancybox 的覆盖层并检查访问者是单击内容的左侧还是右侧，然后相应地调用$.fancybox.prev()or$.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

于 2013-09-22T09:34:14.793 回答