Передача jQuery в загрузчик мультимедиа Wordpress
В плагине Wordpress, над которым я работаю, я использую встроенную функцию загрузки мультимедиа Wordpress (wp.media) для добавления фотографий. Я использую опцию selection
для предварительного выбора изображений в медиатеке после открытия модального. Я подумал, что было бы классной идеей прикрепить новый класс CSS к этим элементам и придать им стиль, отличный от других новых изображений, выбранных пользователем.
У меня возникла проблема с передачей jQuery в модальный режим, и я, похоже, не могу получить события правильные. Проблема в том, что изображения в загрузчике мультимедиа динамически генерируются после открытия модального. Я попытался добавить свой скрипт в событие on
(при открытии модального), но, похоже, это слишком рано. Добавлять их к событиям select
или close
, очевидно, слишком поздно.
Цель состоит в том, чтобы добавить пользовательский класс CSS ко всем изображениям, которые предварительно выбраны после открытия модального. Есть ли у кого-нибудь опыт передачи jQuery в загрузчик мультимедиа модальный?
Вот jQuery, который я использую:
//Image Uploader function
odp_slideshowImageUpload = {
// Call this from the upload button to initiate the upload frame.
uploader : function() {
var frame = wp.media({
title : 'Choose or Upload an Image(s)',
multiple : true,
library : { type : 'image' }, //only can upload images
button : { text : 'Insert Image(s)' }
});
frame.on( 'open', function() {
var selection = frame.state().get('selection');
// Get the id of all the images already in the slideshow
var ids = $( '#odp_slider_container li[id]' ).map(function() { return this.id; }).get();
// When our modal opens, make all of the images "selected"
ids.forEach( function(id) {
attachment = wp.media.attachment(id);
attachment.fetch();
selection.add( attachment ? [ attachment ] : [] );
});
$('.media-modal-content li.selected').addClass('testing'); //does not work
});
// Handle results from media manager
frame.on( 'select', function() {
var selection = frame.state().get( 'selection' );
selection.map( function( attachment ) {
attachment = attachment.toJSON();
$( '#odp_slider_container' ).append( function() {
var output = '';
output += '<li id="' + attachment.id + '" class="odp-slideshow-item" >';
output += '<div class="slide-container"><image src="' + attachment.sizes.thumbnail.url + '" alt="' + attachment.alt + '" /></div>';
output += '<input type="text" class="slide-id odp-force-hidden" name="slide_id[]" value="' + attachment.id + '" />';
output += '<input type="text" class="slide-image odp-force-hidden" name="slide_image[]" value="' + attachment.url + '" />';
output += '<input type="text" class="slide-title odp-force-hidden" name="slide_title[]" value="' + attachment.title + '" />';
output += '<input type="text" class="slide-alt odp-force-hidden" name="slide_alt[]" value="' + attachment.alt + '" />';
output += '<input type="text" class="slide-caption odp-force-hidden" name="slide_caption[]" value="' + attachment.caption + '" />';
output += '<div class="details-container"><a class="details" href="#">Details</a><a class="remove" href="#">Remove</a></div>';
output += '</li>';
return output;
});
});
});
frame.open();
return false;
},
};
Я понимаю, что это сложный вопрос, поэтому дайте мне знать, могу ли я быть более ясным в некоторых областях.
1 answers
Как вы упомянули, загрузчик мультимедиа динамически отображает изображения "по требованию", и, похоже, нет события, на которое можно было бы нацелиться, чтобы добавить класс. Грубый способ сделать это - переопределить атрибут wp.media.view.Attachment.Library.className
(до создания кадра), чтобы вернуть дополнительный класс, если идентификатор модели находится в начальном выборе. Это означает перемещение выбранных идентификаторов за пределы открытого, например
//Image Uploader function
odp_slideshowImageUpload = {
// Call this from the upload button to initiate the upload frame.
uploader : function() {
// Get the id of all the images already in the slideshow
var ids = $( '#odp_slider_container li[id]' ).map(function() { return this.id; }).get();
wp.media.view.Attachment.Library = wp.media.view.Attachment.Library.extend({
className: function () { return $.inArray(this.model.get('id').toString(), ids ) !== -1 ? 'attachment testing' : 'attachment'; }
});
var frame = wp.media({
// etc