Редактор изображений вольера не работает на втором изображении

Я подключаю вольер к файловому менеджеру для редактирования изображений в моем хранилище файлов.

Из ряда больших пальцев я открываю изображение в модальном окне, как только пользователь нажимает на него, обновляя атрибут src изображения, прежде чем я открою модальное окно.

В модальном окне есть кнопка редактирования в вольере, которая открывает вольер, загружает изображения.

Если я нажму на thumb1, а затем отредактирую изображение, все будет работать, как и ожидалось. Затем у меня возникают проблемы с редактированием thumb2.

Он открывает правильное изображение в модальном окне, а затем правильно открывает изображение в вольере, как и ожидалось. Однако - что-то идет не так при первоначальном изменении размера при загрузке окна вольера.

Сначала отображается временное изображение, а затем за этим изображением изменяется размер (появляется увеличенное изображение). Временное изображение остается на экране, а затем вольер ломается.

При новой загрузке все работает как положено, но не при второй загрузке.

Ошибка, которую я вижу в журнале консоли:

Uncaught TypeError: Cannot call method 'isUsingHiResDimensions' of undefined 

Есть ли способ, как только я закрою модальное окно на первом изображении, чтобы очистить все настройки вольера, чтобы в следующий раз начать с чистого листа?

Я вызываю вольер с помощью этой функции:

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

Инициализация моего вольера здесь:

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

Не уверен, что мне нужно сделать, чтобы очистить и начать снова, кроме обновления страницы, любая помощь приветствуется.


person Ray    schedule 03.11.2013    source источник


Ответы (1)


Вы привязываете все больше и больше событий кликов к editImageLink, поэтому код там выполняется более одного раза.

Правильная привязка будет:

$(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'));
    });
});
person Shadow Wizard Wearing Mask V2    schedule 03.11.2013
comment
Не расстраивайтесь, это ошибка, которую в какой-то момент совершает большинство из нас. :) - person Shadow Wizard Wearing Mask V2; 03.11.2013