单击帖子/页面上的添加媒体按钮时,我可以选择添加媒体。选择介质后,单击“插入到帖子中”,图像即被插入。但是,还有另一个选项,位于左侧边栏上。我可以单击“创建库”。图像选择过程是相同的,但当我单击“创建新库”时,它会转到一个新的框架,允许我编辑图像的顺序。
这第二个窗口就是我想要的。我正在从metabox调用框架,我成功地获得了它,允许我抓取单个或多个图像,并将ID保存为字符串,以及将缩略图实时插入预览框。我找不到有关调用库框架的任何信息。
我当前的代码如下:
jQuery(\'#fg_select\').on(\'click\', function(event){
event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frame = wp.media({
title: "Select Images For Gallery",
button: {text: "Select",},
library : { type : \'image\'},
multiple: true // Set to true to allow multiple files to be selected
});
file_frame.on(\'open\', function() {
var selection = file_frame.state().get(\'selection\');
ids = jQuery(\'#fg_metadata\').val().split(\',\');
ids.forEach(function(id) {
attachment = wp.media.attachment(id);
attachment.fetch();
selection.add( attachment ? [ attachment ] : [] );
});
});
file_frame.on(\'ready\', function() {
// Here we can add a custom class to our media modal.
// .media-modal doesn\'t exists before the frame is
// completly initialised.
$( \'.media-modal\' ).addClass( \'no-sidebar\' );
});
// When an image is selected, run a callback.
file_frame.on(\'select\', function() {
var imageIDArray = [];
var imageHTML = \'\';
var metadataString = \'\';
images = file_frame.state().get(\'selection\');
images.each(function(image) {
imageIDArray.push(image.attributes.id);
imageHTML += \'<li><button></button><img id="\'+image.attributes.id+\'" src="\'+image.attributes.url+\'"></li>\';
});
metadataString = imageIDArray.join(",");
if(metadataString){
jQuery("#fg_metadata").val(metadataString);
jQuery("#featuredgallerydiv ul").html(imageHTML);
jQuery(\'#fg_select\').text(\'Edit Selection\');
jQuery(\'#fg_removeall\').addClass(\'visible\');
}
});
// Finally, open the modal
file_frame.open();
});
有什么想法吗?