jQuery & PHP: Upload an image and refresh gallery page with new thumbnail

JavaScript
1

I have a page that contains thumbnails for a photo gallery. On this page is a link to upload more images. When you click the link a modal opens that contains an upload form (jquery colorbox in an iframe) which will allow you to upload one image (plus its name, caption, etc) at a time using PHP. When the form is submitted the image uploads and the page refreshes in the modal to allow for more uploads.

Since this modal is sitting on top of the existing gallery thumbnails I’d really like for the user to see the new thumbnail added to the page after it’s uploaded.

Could somebody give me an example of how to do this with jQuery? I’m a back-end guy and don’t really know javascript, so please be gentle. :wink:

2

I haven’t tried this myself, however if you are using jQuery could you maybe detect when the iframe has loaded and then re-load the gallery using ajax?

For example:

$("#my_iframe").ready(function(e){
 /* Reload gallery in ajax here */
});

Maybe that would work?