PhoneGap - PhotoSwipe去除图像

Question

虽然到目前为止PhotoSwipe一直很棒，但我似乎无法解决这些小问题。

我初始化PhotoSwipe，如下所示

formPhoto.gallery = window.Code.PhotoSwipe.attach( images, options);

在图片库中，用户可以选择是否删除图像

一旦按下delete按钮，就会运行

formPhoto.gallery.cache.images.splice(e.target.currentIndex,1);
delete formPhoto.activeObj.value[e.target.originalImages[e.target.currentIndex].id];


if(formPhoto.gallery.cache.images.length == 0)
   formPhoto.gallery.hide();
else 
   formPhoto.gallery.carousel.show( 0 );

现在，除了2种情况外，这种方法大部分都很好。

1. 如果你低于3张照片，它会破坏幻灯片事件(在幻灯片右边)--图像滑到一个黑色屏幕上。如果你删除并且只剩下一个图像，你甚至不能正确地查看图像--它只会反弹到一个黑色屏幕上。如果你再次将图像添加回画廊，那么被删除的旧图像将再次显示

。

它被重新启动使用

images = [];
for(var x in formPhoto.activeObj.value)
  images.push({url: formPhoto.activeObj.value[x].file, id:x});

formPhoto.gallery = window.Code.PhotoSwipe.attach( images, options);

如果你想的话，我可以试着录下发生了什么。我不知道如何解决这个问题，我环顾了一下https://github.com/codecomputerlove/PhotoSwipe/issues和谷歌，但没有任何帮助。

我真正想要做的就是从画廊中移除一幅图片(它仅以独占模式观看)。

Answer 1

好吧，我最后写了一个临时的解决方案。有点烦人，但我只是手动从旋转木马中删除DOM

            jQuery(formPhoto.gallery.carousel.contentEl).find("[src*=\"" + formPhoto.activeObj.value[e.target.originalImages[e.target.currentIndex].id].file + "\"]").parent().remove();
            //we look for the image that contains the same filename as the one we're trying to delete.
            //so we just remove that.

            formPhoto.gallery.cache.images.splice(e.target.currentIndex,1);

            delete formPhoto.activeObj.value[e.target.originalImages[e.target.currentIndex].id];
            e.target.originalImages.splice(e.target.currentIndex, 1);


            formPhoto.activeObj.object.find("[type=amountadded]").html(formPhoto.activeObj.valueLength() + " photos");

            if(formPhoto.gallery.cache.images.length == 0)
                formPhoto.gallery.hide();
            else   {
                //real hacky job. Atleast it looks like a real cool effect occured.
                formPhoto.galleryInitiate(formPhoto.activeObj, e.target.originalImages);
            }

还修正了图像重新出现的问题，因为新生成的文件具有相同的文件名。将日期组件添加到文件名中，以便于同时使用。

Answer 2

这是delete按钮的处理程序

function ps_delete_image(btn) {
    var inst = PhotoSwipe.instances[0];
    var curImg = $photoSwipe.getCurrentImage();
    inst.cache.images.splice(inst.currentIndex, 1);
    inst.originalImages.splice(inst.currentIndex, 1);
    if(inst.cache.images.length == 0) inst.hide();
    else {
        if (inst.currentIndex == inst.cache.images.length) inst.carousel.show(inst.currentIndex - 1);
        else inst.carousel.show(inst.currentIndex);
    }
    // remove delete button if 3 or less is left
    if(inst.cache.images.length <= 3) {
        $(btn).remove();
    }
}

为了克服3和更少图像的问题，我只是删除删除按钮。