Custom Post Type Metabox with fancybox WordPress

Arnav Joy comments:

so here is my answer for the meta boxes , i have slightly modified it in look , please see the attached screenshot for it.

now create a js file and named it as custom-js.js , place it in js folder of your theme.

put following code into custom-js.js
jQuery(function(jQuery) {

jQuery('.custom_upload_image_button').click(function() {
formfield = jQuery(this).siblings('.custom_upload_image');
preview = jQuery(this).siblings('.custom_preview_image');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
classes = jQuery('img', html).attr('class');
id = classes.replace(/(.*?)wp-image-/, '');
formfield.val(id);
preview.attr('src', imgurl);
preview.attr('width', "100");
preview.attr('height', "100");
tb_remove();
}
return false;
});

jQuery('.custom_clear_image_button').click(function() {
var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
jQuery(this).parent().siblings('.custom_upload_image').val('');
jQuery(this).parent().siblings('.custom_preview_image').attr('src', defaultImage);
return false;
});

});

now in functions.php place following code:-

wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js');

function add_custom_meta_box() {
add_meta_box(
'custom_meta_box', // $id
'Images', // $title
'show_custom_meta_box', // $callback
'Accommodation', // $page
'normal', // $context
'high'); // $priority
}
add_action('add_meta_boxes', 'add_custom_meta_box');

$prefix = 'custom_';
$custom_meta_fields = array(
array(
'label' => 'Image1',
'name' => 'Image1',
'desc' => 'A description for the field.',
'id' => $prefix.'image1',
'type' => 'image'
)
,
array(
'label' => 'Image2',
'name' => 'Image2',
'desc' => 'A description for the field.',
'id' => $prefix.'image2',
'type' => 'image'
)
,
array(
'label' => 'Image3',
'name' => 'Image3',
'desc' => 'A description for the field.',
'id' => $prefix.'image3',
'type' => 'image'
)
,
array(
'label' => 'Image4',
'name' => 'Image4',
'desc' => 'A description for the field.',
'id' => $prefix.'image4',
'type' => 'image'
)

);

function show_custom_meta_box() {
global $custom_meta_fields, $post;
// Use nonce for verification
echo '<input type="hidden" name="custom_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />';

// Begin the field table and loop
echo '<table class="form-table">';
echo '<tr><td colspan="2">Upload an image and then click "insert into post". To delete an image just prese "Remove Image".Images will automatically resized to proper width and random height.<br/>Make sure you upload image with minimum width of 900px</td></tr>';
foreach ($custom_meta_fields as $field) {
// get value of this field if it exists for this post
$meta = get_post_meta($post->ID, $field['id'], true);
// begin a table row with
echo '<tr>
<th><label for="'.$field['id'].'">'.$field['label'].'</label></th>
<td>';
switch($field['type']) {
case 'image':
$image = get_template_directory_uri().'/images/image.png';
echo '<span class="custom_default_image" style="display:none">'.$image.'</span>';
if ($meta) { $image = wp_get_attachment_image_src($meta, 'medium'); $image = $image[0]; }
echo '<input name="'.$field['id'].'" type="hidden" class="custom_upload_image" value="'.$meta.'" />
<img src="'.$image.'" class="custom_preview_image" alt="" width="100" height="100" /><br />
<input class="custom_upload_image_button button" type="button" value="Choose Image" />
<small> <a href="#" class="custom_clear_image_button">Remove Image</a></small>
<br clear="all" /><span class="description">'.$field['desc'].'';
break;
} //end switch
echo '</td></tr>';
} // end foreach
echo '</table>'; // end table


}


function save_custom_meta($post_id) {
global $custom_meta_fields;

// verify nonce
if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))
return $post_id;
// check autosave
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return $post_id;
// check permissions
if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id))
return $post_id;
} elseif (!current_user_can('edit_post', $post_id)) {
return $post_id;
}

// loop through fields and save the data
foreach ($custom_meta_fields as $field) {
$old = get_post_meta($post_id, $field['id'], true);
$new = $_POST[$field['id']];
if ($new && $new != $old) {
update_post_meta($post_id, $field['id'], $new);
} elseif ('' == $new && $old) {
delete_post_meta($post_id, $field['id'], $old);
}
} // end foreach
}
add_action('save_post', 'save_custom_meta');

I have created this these boxes for custom post type "Accommodation" , test this and let me know if it is ok then i will create it for other post type also.

-Arnav