Loading EXIF data from currently displayed image with jquery

Question

I am in the current situation:

I am developing a site for publishing my photos. I am using twitter bootstrap, jquery and Galleria.io

Now i want to show some exif data from the photos i made. Therefore i want to use this jquery plugin: http://blog.nihilogic.dk/2008/05/jquery-exif-data-plugin.html

I have already tested the examples give on the side. They work. The code below doesn't. It returns an empty alert, everytime the image is loaded. So at least this works. These are my first steps in javascript, so i am glad for every help.

The exif data should be updated everytime I change the image. All images are located on the same server.

Galleria.ready(function(options) {
    // this = the gallery instance
    // options = the gallery options
        this.bind('image', function(e) {
            imgHandle = $(e.imageTarget)
            imgHandle.load(function() {
                $(this).exifLoad(function() {
                    alert($(this).exifPretty());
                });
            });
        });
    });

    $("#img2").load(function() {
        $(this).exifLoad(function() {
            alert($(this).exifPretty());
        });
    });

I hope you can help me.

Answer 1

Okay i figured it out with a friend:

My code now looks like this:

Galleria.ready(function(options) {
    // this = the gallery instance
    // options = the gallery options
    // will be called after the image is loaded
        this.bind('image', function(e) { 
            imgHandle = e.imageTarget;
            alert('Image loaded');
            //will be called if on same server
            $(imgHandle).exifLoad(function() {
                alert('Exif loaded');
                alert($(imgHandle).exifPretty());
                //do something here....
                });
            });
        });
    });

And it works only with images on the server but not on remote servers.