PhoneGap - PhotoSwipe removing Images

Question

while PhotoSwipe has been fantastic so far just these minor issues that I can't seem to get around

I initialize PhotoSwipe as follows

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

And inside a Gallery, a user can choose whether to delete an image or not via

Once the delete button is pushed this is run

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 );

Now this works mostly fine, except in 2 cases.

If you are below 3 photos, it breaks the slide event (on slide right) - The image slides onto a black screen. If you delete and only have 1 image left, you can't even view the image properly it just bounces back onto a black screen.
If you add images back into the gallery again, the old images that were deleted are shown again

It is reinitiated using

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);

If you want, I can try grab a recording of whats going on. I'm not sure how to solve this, I've looked around on the https://github.com/codecomputerlove/PhotoSwipe/issues and google but nothing helpful.

All I really want to do is just remove an image from the Gallery (its viewed in Exclusive Mode only)

score 0 · Accepted Answer · answered May 10 '12 at 06:36

Ok, I ended up writing a temporary solution.. its a bit hacky, but I just manually remove the DOM from the carousel

            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);
            }

Also fixed the issue of the images reappearing, was because the newly generated files had the same filenames. Added a date component to the file names for the mean time.

score 0 · Answer 2 · answered May 28 '14 at 09:00

This is the handler for a delete button

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();
    }
}

To overcome issue with 3 and less images I just remove delete button.

PhoneGap - PhotoSwipe removing Images

2 Answers2