I have this plugin that adds a metabox to the post-page screen to upload multiple images. This works great however I'm missing one option.
I want to add that function to the metabox.
The problem is that there is a little part that is written in Jquery. And the problem here is that I don't understand Jquery.
I've done some searching online and saw a couple of discussions where they talk about AJAX. This issomething I also don't understand.
Can somebody give me some pointers on how to do this with the current code. If I know how to get and pass data to the database inn Jquery with PHP I'm set. The PHP part is no problem. The connection is.
Here is the function that adds images:
/**
*
* Render Meta Box content.
*
*/
public function render_meta_box($post)
{
// Add an nonce field so we can track post.
wp_nonce_field('sr_multi_upload', 'sr_multi_upload_nonce');
// Use get_post_meta to retrieve an existing value from the database.
$value = get_post_meta($post->ID, 'sr_multi_images', true);
$image_content = '<div id="sr_multi_images"></div>
<div style="clear:both;">
<input class="button button-primary button-large" type="button" onClick="addNewRow()" value="Add Image" style="margin-top:5px">
</div>';
echo $image_content;
$images = unserialize($value);
$JS = "<script>totalItems= 0;var plugin_dir = '".plugin_dir_url(__FILE__)."';";
if (!empty($images))
{
foreach ($images as $image)
{
$JS.="addNewRow('{$image}');";
}
}
$JS .="</script>";
echo $JS;
}
Here is the Jquery:
jQuery(document).ready(function(){
jQuery('.Upload_button').live( "click", function(e) {
e.preventDefault();
var id = jQuery(this).attr("id")
var up_btn = id.split("-");
up_img_id = up_btn[1];
formfield = jQuery('#image-'+up_img_id).attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img', html).attr('src');
jQuery('#image-'+up_img_id).val(imgurl);
var image_src_live = "<img src='"+imgurl+"' height='100' width='100'>";
jQuery('#live-image-'+up_img_id).append(image_src_live);
jQuery('#Upload_button-'+up_img_id).hide();
tb_remove();
};
jQuery( "#sr_multi_images input[type=hidden]" ).each(function( i ) {
var input_id = this.id;
var remove_upload = input_id.split("-");
var input_value_check = jQuery('#'+input_id).val();
var after_save_img = "<img src='"+input_value_check+"' height='100' width='100'>";
if (jQuery('#live-'+input_id).length) {
jQuery('#live-'+input_id).append(after_save_img);
jQuery('#Upload_button-'+remove_upload[1]).hide();
}
});
jQuery('.sr-umi-remove').live( "click", function(e) {
e.preventDefault();
var id = jQuery(this).attr("id")
var div_id = id.split("-");
var row_id = div_id[1];
jQuery("#row-"+row_id ).remove();
});
});
function addNewRow(image){
if(typeof(image)==='undefined') image = "";
totalItems += 1;
var bulkImages = '<div style="float:left;clear:both;margin-top:15px;" id=row-'+totalItems+'> <div style="float:left;clear:both;" id="live-image-'+totalItems+'"></div><input style=\'width:70%\' id=image-'+totalItems+' type=\'hidden\' name=\'sr_multi_images['+totalItems+']\' value=\''+image+'\' />'
+'<img src="'+plugin_dir+'img/up.jpg" class="Upload_button" alt="Upload Image" style="float:left;margin-right:30px;margin-top: -14px;cursor:pointer;border-radius:10px" id=\'Upload_button-'+totalItems+'\'/>'
+'<img src="'+plugin_dir+'img/remove.png" class="sr-umi-remove" alt="Remove Image" style="float:left;margin-left: -17px;margin-top: -14px;cursor:pointer;" id=\'remove-'+totalItems+'\'/></div>';
//<input class="sr-umi-remove button" style="float:left;" type=\'button\' value=\'Remove\' id=\'remove-'+totalItems+'\' />
//<input type=\'button\' href=\'#\' class=\'Upload_button button\' id=\'Upload_button-'+totalItems+'\' value=\'Upload\' style=\'float:left;\'>
jQuery('#sr_multi_images').append(bulkImages);
}
I hope somebody can help me out here!!!!!
Aucun commentaire:
Enregistrer un commentaire