脚本宝典收集整理的这篇文章主要介绍了php – 从Metabox调用WordPress Gallery Uploader / Selector，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。@H_301_0@ 当我单击帖子/页面上的添加媒体按钮时,我可以选择添加媒体.选择媒体后,单击“插入到帖子”,然后插入图像.但是,还有另一个选项,位于左侧边栏.我可以点击创建图库.图像选择过程是相同的,但是当我单击“创建新图库”时,它会转到一个新框架,允许我编辑图像的顺序.
第二个窗口就是我追求的目标.我从MetaBox调用框架,我已经成功地让它抓住单个或多个图像并将ID保存为字符串,以及将缩略图直接插入预览框.我找不到任何关于调用Gallery框架的信息.
我目前的代码如下：
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(); });
有任何想法吗？
编辑：
我已经把它直接调用了画廊,没有任何侧边栏等等.但是,它现在忽略了on(‘select’)调用.我猜画廊在选择图像时会发出不同的电话？
jQuery(document).ready(function($){
// Uploading files
var file_frame;
jQuery('#fg_select').on('click',reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frame = wp.media({
frame: "post",state: "featured-gallery",button: {text: "Edit Image Order"},multiple: true
});
file_frame.states.add([
new wp.media.controller.Library({
id: 'featured-gallery',title: 'Select Images for Gallery',PRiority: 20,toolbar: 'main-gallery',filterable: 'uploaded',library: wp.media.query( file_frame.options.library ),multiple: file_frame.options.multiple ? 'reset' : false,editable: true,allowLocalEdits: true,displaySettings: true,displayUserSettings: true
}),]);
file_frame.on('open',');
if (!empty(ids)) {
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' );
});
file_frame.on('change',function() {
// Here we can add a custom class to our media modal.
// .media-modal doesn't exists before the frame is
// completly initialised.
setTimeout(function(){
$('.media-menu a:First-child').text('← Edit Selection').addClass('button').addClass('button-large').addClass('button-Primary');
},0);
});
// When an image is selected,run a callback.
file_frame.on('set',function() {
alert('test');
});
// Finally,open the modal
file_frame.open();
});
编辑2：
好的,所以我已经把所有东西都正确地解雇了.但我无法破译@L_360_26@的图库代码.
// When an image is selected,run a callback.
file_frame.on('update',");
if (MetadataString) {
jQuery("#fg_Metadata").val(MetadataString);
jQuery("#featuredgallerydiv ul").html(imageHTML);
jQuery('#fg_select').text('Edit Selection');
jQuery('#fg_removeall').addClass('visible');
}
});
$imageArray或$imageHTML没有任何结果. $image是东西,它是[对象对象].
编辑3：如下面评论中所述,编辑2中的代码的主要问题是,当使用Gallery时,您必须调用“库”而不是“选择”.
// Uploading files
var file_frame;
jQuery('#fg_select').on('click',state: "gallery",multiple: true
});
file_frame.on('open',function() {
var selection = file_frame.state().get('selection');
var ids = jQuery('#fg_Metadata').val();
if (ids) {
idsArray = ids.split(',');
idsArray.forEach(function(id) {
attachment = wp.media.attachment(id);
attachment.fetch();
selection.add( attachment ? [ attachment ] : [] );
});
}
});
// When an image is selected,function() {
var imageIDArray = [];
var imageHTML = '';
var MetadataString = '';
images = file_frame.state().get('library');
images.each(function(attachment) {
imageIDArray.push(attachment.attributes.id);
imageHTML += '<li><button></button><img id="'+attachment.attributes.id+'" src="'+attachment.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();
});
我现在遇到的主要问题是我无法通过选择打开图库编辑.我可以把它打开,但没有选择图像.我在调查那个.我也在考虑重新开放而不是创建新视图并发送预选.如果我进入选择窗口,然后是订单窗口,但是单击X关闭,我可以重新打开订单窗口.所以应该有办法.
编辑4
file_frame.on('open',function() {
var library = file_frame.state().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();
library.add( attachment ? [ attachment ] : [] );
});
}
});
这允许我直接重新打开图库编辑状态并预先选择图像.但是,当我直接打开这个状态时,我无法点击取消图库(返回图像选择状态).单击该按钮/链接只会关闭框架.我尝试预填充库和选择,但这也不起作用.以下是来自media-views.js,似乎是控制该按钮的内容.它不是将状态更改为特定状态,而是将其更改为先前的状态.由于我们直接打开gallery-edit,因此没有过去的状态.我想知道是否可以打开图库,然后打开,更改为图库编辑.立即执行以便用户看不到,但是它会将过去的状态带入系统.
galleryMenu: function( view ) {
var lastState = this.lastState(),prevIoUs = lastState && lastState.id,frame = this;
编辑5：
终于想通了.我根本无法完成上述任务,我不知道为什么.因此,可能有更好的方法来执行此操作,涉及该代码.如果是这样,我很想知道.
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 ] : [] );
});
}
});
最终编辑
我的代码现在完全正常工作,我很感激帮助！如果您想看到它的实际效果,请查看http://wordpress.org/plugins/featured-galleries/
以上是脚本宝典为你收集整理的php – 从Metabox调用WordPress Gallery Uploader / Selector全部内容，希望文章能够帮你解决php – 从Metabox调用WordPress Gallery Uploader / Selector所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。