Iframeを内部に持つjQueryモーダルダイアログを使用することになりました。画像をクリックすると、入力フィールドにデータが入力され、ダイアログが閉じます。
誰かにインスピレーションを与えることができる場合のサンプルコード...
これが参照ボタン付きの入力ボックスです
<input type='text' name='data_1' id='data_1' size='30' value='' /> <input type='button' value='Bläddra' onclick="openMediaLibrary('data_1');" />
これはフォームページのどこかにあります(デフォルトでは非表示になっています)
<div id="mediaLibrary" title="Mediabiblioteket">
<iframe width="1050px" height="600px" src="{{ path('Media') }}" /></iframe>
</div>
これがmediaLibraryの画像のサンプルです
<a href="javascript:selectImage('{{ entity.webPath }}')"><img src="{{ entity.webPath | apply_filter('my_thumb') }}" class="media_archive_image" /></a>
mediaLibraryを初期化、オープン、クローズするための私の関数は次のとおりです
$(document).ready(function() {
$( "#mediaLibrary" ).dialog({
height: 700,
width:1100,
modal: true,
autoOpen: false,
position: { my: "center", at: "center" },
});
};
function openMediaLibrary(passedField) {
//Set the variable that keeps track of which field to pass back the image url to
window.imageInputField = passedField
//open the mediaLibrary
$( "#mediaLibrary" ).dialog( "open" );
}
function closeMediaLibrary() {
$( "#mediaLibrary" ).dialog( "close" );
}
そして最後に、画像を割り当ててmediaLibraryを閉じるための関数
function selectImage(image) {
if (parent.window.imageInputField) {
//set image to the input field
parent.window.document.getElementById(parent.window.imageInputField).value = image;
//Close the dialogue box
parent.window.closeMediaLibrary();
}
else {
//do nothing for now, perhaps show image in fullsize in lightbox here?
}
}