0

私の画像のURLを取得するHTMLフォームフィールドがあります。私は(私のサイトの別のセクションに)ユーザーが画像を操作して整理できるメディアライブラリを持っています。このメディアライブラリを新しいウィンドウで開くことができるようにしたいと思います(私にとっては簡単ですが、マザーウィンドウのフォームフィールドに新しいウィンドウのスクリプトを入力する方法がわかりません。メソッドは許可されていませんか? )またはメディアライブラリをdivに読み込む(ページを更新せずにそのdivのみを更新するためにメディアライブラリナビゲーションの多くを書き直す必要があるため、より面倒です)。

私はこれをやったことがないので、ベテランの誰かが私にヒントを与えて、正しい方向に私を始めることができるかもしれないと思っていました。

4

1 に答える 1

0

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?
    }
}   
于 2012-11-07T19:25:22.873 に答える