在Colorbox中查看当前照片的左侧的单击中的上一张照片

Question

在Colorbox 1.6.0中，单击显示的照片表示下一个可用的照片。

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

我知道如何确定鼠标单击是在DIV的左或右侧的左右单击，因此我考虑实现自己的点击处理程序。点击处理程序将调用PRAV（）或NEXT（）公共方法。虽然，我不知道将点击处理程序到达哪里，因为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...
});

单击处理程序 - 这个想法是从这个问题中获取的 - 确定鼠标是在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 -function 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参数，我正在过滤文档上发生的点击事件，并说我只有在与此选择器匹配的元素时才感兴趣。

这比我记录了一个问题要困难。

更新：

问题已得到响应，因此，如果您使用v1.6.1，则onComplete回调为：

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