クリックすると(モーダルウィンドウから)入力フィールドに画像URLを送信する次のスクリプトがあります。また、挿入時に表示するために、同じ URLimgurl
を aに送信しています。<div class="preview-image>
var BusiPress_Configuration = {
init : function() {
this.files();
},
files : function() {
if ( $( '.busipress_upload_image_button' ).length > 0 ) {
window.formfield = '';
$('.busipress_upload_image_button').on('click', function(e) {
e.preventDefault();
window.formfield = $(this).parent().prev();
window.tbframe_interval = setInterval(function() {
jQuery('#TB_iframeContent').contents().find('.savesend .button').val(busipress_vars.use_this_file).end().find('#insert-gallery, .wp-post-thumbnail').hide();
}, 2000);
if (busipress_vars.post_id != null ) {
var post_id = 'post_id=' + busipress_vars.post_id + '&';
}
tb_show(busipress_vars.add_new_file, 'media-upload.php?' + post_id +'TB_iframe=true');
});
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function (html) {
if (window.formfield) {
imgurl = $('a', '<div>' + html + '</div>').attr('href');
window.formfield.val(imgurl);
window.clearInterval(window.tbframe_interval);
tb_remove();
$('.preview-image img').attr('src',imgurl);
} else {
window.original_send_to_editor(html);
}
window.formfield = '';
window.imagefield = false;
}
}
}
}
BusiPress_Configuration.init();
画像の URL をエディターに送信すると、div は正常に機能していますが、ページ上のその div のすべてのインスタンスに対して実行しています。$(this)
入力の近くの特定の div に挿入をローカライズできるかどうかを確認するためにいじっていましclosest()
たが、運がありませんでした。どんな助けでも大歓迎です。ありがとう!
デフォルトのマークアップ
<table class="form-table">
<tbody>
<tr valign="top">
<th scope="row">Default Map Icon</th>
<td>
<input type="text" class="-text busipress_upload_field" id=
"busipress_settings_map[default_map_icon]" name=
"busipress_settings_map[default_map_icon]" value=
"http://localhost/jhtwp/wp-content/plugins/busipress/img/red-dot.png" /><span> <input type="button"
class="busipress_upload_image_button button-secondary" value=
"Upload File" /></span> <label for=
"busipress_settings_map[default_map_icon]">Choose the default map icon (if
individual business type icon is not set</label>
<div class="preview-image" style="padding-top:10px;"><img src=
"http://localhost/jhtwp/wp-content/plugins/busipress/img/red-dot.png" /></div>
</td>
</tr>
<tr valign="top">
<th scope="row">Active Map Icon</th>
<td>
<input type="text" class="-text busipress_upload_field" id=
"busipress_settings_map[active_map_icon]" name=
"busipress_settings_map[active_map_icon]" value=
"http://localhost/jhtwp/wp-content/plugins/busipress/img/blue-dot.png" /><span> <input type="button"
class="busipress_upload_image_button button-secondary" value=
"Upload File" /></span> <label for=
"busipress_settings_map[active_map_icon]">Choose the active map icon (if
individual business type icon is not set</label>
<div class="preview-image" style="padding-top:10px;"><img src=
"http://localhost/jhtwp/wp-content/plugins/busipress/img/blue-dot.png" /></div>
</td>
</tr>
</tbody>
</table>