Aviary image editor failing on second image

Question

I'm linking in aviary into a filemanger to edit images in my filestore.

From a range of thumbs I'm opening the image into a modal window once the user clicks on it, updating the src attribute of the image before I open the modal window

On the modal window there's a button to edit in aviary which opens aviary, loads the images.

If I click on thumb1 and then edit the image all works well as expected. I'm then having problems with editing thumb2.

It opens the correct image in the modal window and then correctly opens the image in aviary as expected. However - something is going wrong in the initial resize on loading the aviary window.

The temp image is initially shown and then behind this image a resized (larger image appears). The temp image remains on screen and then aviary breaks.

On a fresh load everything works as expected but not on second load.

The error I can see in console log is:

Uncaught TypeError: Cannot call method 'isUsingHiResDimensions' of undefined 

Is there a way, once I close the modal on the first image to clear any settings of aviary give it a clean start next time?

I'm calling aviary with this function:

$(document).ready(function() {
    $('.thumbnail').click(function(event) {
        var imagePreview = $('#image1');
        imagePreview.attr('src',$(this).attr('href'));
        $('#editImageLink').click(function(event) {
            return launchEditor('image1', imagePreview.attr('src'));
        });
        $('#imagePreview').modal('show');
        return false;
    });
});

My aviary initialisation is here:

var featherEditor = new Aviary.Feather({
    apiKey: 'mycode',
    apiVersion: 3,
    theme: 'dark', // Check out our new 'light' and 'dark' themes!
    tools: 'all',
    appendTo: '',
    onSave: function(imageID, newURL) {
        var img = document.getElementById(imageID);
        img.src = newURL;
    },
    onError: function(errorObj) {
        alert(errorObj.message);
    }
});
function launchEditor(id, src) {
    featherEditor.launch({
        image: id,
        url: src
    });
    return false;
}

Not sure what I need to do to clear and start again other than page refresh, any help is appreciated.

Answer 1

You are binding more and more click events to editImageLink so the code there is running more than once.

Proper binding would be:

$(document).ready(function() {
    var imagePreview = $('#image1');

    $('.thumbnail').click(function(event) {
        imagePreview.attr('src',$(this).attr('href'));
        $('#imagePreview').modal('show');
        return false;
    });

    $('#editImageLink').click(function(event) {
        return launchEditor('image1', imagePreview.attr('src'));
    });
});