单击 Colorbox 中当前照片的左半部分显示上一张照片

Question

在 Colorbox 1.6.0 中，默认情况下，单击显示的照片意味着显示下一张可用的照片。

当用户点击当前照片的左半部分时，我可以自定义 Colorbox 以显示上一张照片吗？

我知道如何确定鼠标点击一般发生在 div 的左半边还是右半边，所以我考虑实现自己的点击处理程序。单击处理程序将调用 prev() 或 next() public 方法。不过，我不知道将我的点击处理程序放在哪里，因为 Colorbox 默认行为优先。

HTML中的照片：

<a class="my-colorbox" href="..." rel="gallery-colorbox" title="First"></a>
<a class="my-colorbox" href="..." rel="gallery-colorbox" title="Second"></a>
<a class="my-colorbox" href="..." rel="gallery-colorbox" title="Third"></a>

颜色框初始化：

$(".my-colorbox").colorbox({
    rel: "gallery-colorbox",
    photo: true,
    loop: false,
    transition: "none",
    maxWidth: "90%",
    maxHeight: "90%",
    ...internationalization...
});

点击处理程序 - 这个想法来自这个问题 - Determining if mouse click happened in left or right half of DIV :

$("#cboxLoadedContent").click(function (e) {
    var pWidth = $(this).innerWidth();
    var pOffset = $(this).offset();
    var x = e.pageX - pOffset.left;
    if (pWidth / 2 > x)
        $.colorbox.prev();
    else
        $.colorbox.next();
});

问题是 #cboxLoadedContent 不是绑定处理程序的正确位置，因为从未调用过处理程序。

我相信这是优先的代码（Colorbox - 函数 load）。

...
photo = settings.get('createImg');
...
if ($related[1] && (settings.get('loop') || $related[index + 1])) {
    photo.style.cursor = 'pointer';
    photo.onclick = function () {
        publicMethod.next();
    };
}

Answer 1

查看演示颜色框，我看到当显示图像时，最上面的 dom 元素（因此将在点击事件中被点击的元素）是：

<img class="cboxPhoto" src="somePicture.jpg">

所以我会将事件处理程序附加到这种特定类型的 <img>。

$(".my-colorbox").colorbox({
    /* your options */
    onComplete: function() {
        $(".cboxPhoto").removeAttr("onclick"); //stop the default
    }
});
$(document).on("click", ".cboxPhoto", function(e) {
    /* your left/right handler code here */
})

通过添加 .cboxPhoto 参数，我过滤了文档上发生的点击事件，并表示我只对与此选择器匹配的元素感兴趣。

这比我需要的要难logged an issue。

更新：

问题已得到回复，如果您使用 v1.6.1，则 onComplete 回调将是：

function() {
    $(".cboxPhoto").off("click.cbox");
}

单击 Colorbox 中当前照片的左半部分显示上一张照片

Show previous photo on click in the left half of the current photo in Colorbox

jquery

colorbox