从Metabox调用WP图库Uploader/Selector

Question

单击Post/Page上的Add Media按钮时，我可以选择添加Media。选择媒体后，我单击inserted，然后插入图像。但是，还有另一个选项，在左边的侧边栏上。我可以点击创建画廊。图像选择过程是相同的，但是当我单击时，它会转到一个新的框架，它允许我编辑图像的顺序。

第二个窗口就是我要找的东西。我正在从一个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();

});

有什么想法吗？

Answer 1

想出了问题的答案。

file_frame.on('open', function() {
    var selection = file_frame.state().get('selection');
    var library = file_frame.state('gallery-edit').get('library');
    var ids = jQuery('#fg_perm_metadata').val();
    if (ids) {
        idsArray = ids.split(',');
        idsArray.forEach(function(id) {
            attachment = wp.media.attachment(id);
            attachment.fetch();
            selection.add( attachment ? [ attachment ] : [] );
        });
        file_frame.setState('gallery-edit');
        idsArray.forEach(function(id) {
            attachment = wp.media.attachment(id);
            attachment.fetch();
            library.add( attachment ? [ attachment ] : [] );
        });
    }
});

有关更多细节，请查看：https://stackoverflow.com/questions/21858112/calling-wordpress-gallery-uploader-selector-from-metabox。

若要查看运行中的工作代码，请参见：http://wordpress.org/plugins/featured-galleries/