Менеджер загрузки изображений ⇐ Jquery

[Anonymous]

Я пытаюсь создать менеджер изображений для моего CMS на основе WordPress Media Manager. CMS разрабатывается в YII2. < /P>
Прямо сейчас я могу загружать и просматривать все загруженные изображения. Затем я хотел иметь возможность добавлять пользовательские кнопки (загрузить логотип, загрузить заголовок и т. Д.), Которые позволили бы пользователю вызвать диспетчер изображений в модале. Затем загрузите или выберите изображение из галереи и добавьте идентификатор изображений в поле HiddenInput (логотип, заголовок и т. Д.). Но у меня возникли проблемы с выполнением этого.
Это то, что у меня есть до сих пор:
У меня есть два ввода в одной форме, один для логотипа, а другой для avicon
логотип Hiddeninput: id -> site -log_media_id




/> img preview: class-> preview_site-logo_media_id
кнопка: id-> logo-button, пользовательский атрибут input_id-> site-logo_media_id, class-> showmodalbutton

Код: Выделить всё

favicon hiddeninput: id -> site -favicon_media-id
IMG Preview: class -> preview_site -favicon_media_id
кнопка: id -> aTrib - -custmid, custmId, custmId, custmId, custmId, custmId, custmit -butttton, custmit -buttton, custmit -buttton. site-favicon_media_id, class-> showmodalbutton

Код: Выделить всё

Когда одна из кнопок нажимается modal вызывается со всеми загруженными изображениями и опцией для загрузки. Изображения в галерее обернуты в теги с помощью класса Gallery-item , с атрибутом cleap , содержащего изображение id .
javascript

Код: Выделить всё

show_file_manager();

function show_file_manager() {
$('.showModalButton').click(function() {
// opens modal
var input_id = $(this).attr("input_id");
var preview_class = "preview_" + $(this).attr("input_id");
// input_id gets the hiddeninput id, preview class is meant to display the selected images.
select_gallery_item(input_id, preview_class);
//the input_id and preview_class are passed to the next function
});
}

function select_gallery_item(input_id, preview_class) {
$('.gallery-item').click(function() {
// gallery-item is the class name of the li containing an image
var file_id = $(this).attr('data-key');
// file_id is the image id
var src = $(this).children('img').attr('src');
// src gets the value from the images src to use in the preview class
console.log(file_id);
if (file_id) {
$("#add-to-input").click(function() {
// this button passes the image id to the hiddeninput with the correct input id(site-logo_media-id, site-favicon_media-id) and the images src to the preview class(preview_site-logo_media-id, preview_site-favicon_media-id)
$('#' + input_id).val(file_id);
$("." + preview_class).attr("src", src);
});
}
});
}

Проблемы:

[*] Это кажется, что функция select_gallery_item (javascript) увеличивается каждый раз, когда .showmodalbutton . Pressing it once shows the console.log(file_id) once, pressing it twice shows the console.log(file_id) twice, etc.

If I press the second button .showModalButton the image id and src Получите добавлено в обоих hiddeninputfields (site-favicon_media-id, site-logo_media-id) < /p>
< /li>
< /ul>
Я надеюсь, что я смог передать проблему, любая помощь будет очень оценена. Что я делаю не так? Как я могу сделать это лучше? Заранее спасибо.

Подробнее здесь: https://stackoverflow.com/questions/352 ... ad-manager