Question

在Colorbox 1.6.0中，默认情况下，单击显示的照片即表示将显示下一张可用照片。

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

我知道如何确定鼠标点击是否发生在div的左半部分或右半部分，所以我考虑实现自己的点击处理程序。点击处理程序将调用prev（）或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>

Colorbox初始化：

$(".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 - 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参数，我正在过滤文档上发生的click事件，并说我只对匹配此选择器的元素发生时感兴趣。

这比我需要logged an issue更难。

<强>更新

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

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

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

1 个答案: