PhoneGap - PhotoSwipe 删除图像答案

【问题标题】：PhoneGap - PhotoSwipe removing ImagesPhoneGap - PhotoSwipe 删除图像
【发布时间】：2012-05-10 05:46:12
【问题描述】：

虽然到目前为止 PhotoSwipe 非常棒，但我似乎无法解决这些小问题

我如下初始化 PhotoSwipe

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

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

一旦按下删除按钮，就会运行

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 种情况。

如果您的照片少于 3 张，它会中断幻灯片事件（在幻灯片右侧） - 图像滑到黑屏上。如果您删除后只剩下 1 张图片，您甚至无法正常查看图片，它只会弹回黑屏。
如果您将图像重新添加回图库，已删除的旧图像会再次显示

使用

重新启动

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 和谷歌，但没有任何帮助。

我真正想做的只是从图库中删除一张图片（仅在独占模式下查看）

【问题讨论】：

标签： javascript image cordova photoswipe

【解决方案1】：

好的，我最终写了一个临时解决方案.. 它有点 hacky，但我只是手动从轮播中删除 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);
            }

还修复了图像重新出现的问题，因为新生成的文件具有相同的文件名。同时在文件名中添加了日期组件。

【讨论】：

【解决方案2】：

这是删除按钮的处理程序

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 张或更少图片的问题，我只需删除删除按钮。

【讨论】：