2

このコードは、画像を div 要素にドラッグした後、画像を DOM に追加します。

var showImage = function (ev) {
    var file = ev.target.file;

    var thumb = new Image(100,100);
    thumb.src = ev.target.result;
    thumb.className = 'thumbFoto';
    thumb.title = file.name;
    thumb.alt = file.name;

    var anchor = document.createElement('a');
    anchor.className = 'thumbLink';
    anchor.href = ev.target.result;
    anchor.rel = 'album1';
    anchor.title = file.name;
    anchor.appendChild(thumb);

    dropZone.appendChild(anchor);
}

このコードは、を使用してページにリンクされています

<script type="text/javascript" src="js/code.js"></script>

画像が Web ページに追加された後、Fancybox を使用してプレビューしたいと思います。ページが読み込まれると (画像をドラッグする前に)、次のスクリプトが html-header で実行されます。

<script type="text/javascript">
    $(document).ready(function() {
        /* Apply fancybox to albums */
        $("a.thumbLink").fancybox();
    });
</script>

Fancybox を使用して最近追加された画像をプレビューできるようにするにはどうすればよいですか?

4

2 に答える 2

0

「ChainofResponsibility」パターンを使用して、すべてのDOM変更を単一のオブジェクトにルーティングしてみてください。このようにして、オブジェクトはDOMへの変更を追跡できます。次に、ConversationJSを使用して、DOMの変更で必要なことをすべて実行する関数を起動します：https ：//github.com/rhyneandrew/Conversation.JS

于 2012-12-09T23:30:35.010 に答える
0

stop()jQuery UI のドラッグ可能なオブジェクトを使用すると仮定します。次のように、ドラッグ可能なオブジェクトのイベントでfancybox を呼び出すことができます。

$( ".selector" ).draggable({
    stop: function( event, ui ) {
        $("a.thumbLink").fancybox();
    }
});

編集：

showFileInListコードに基づいて、次のように、ファンシーボックスの呼び出し元を の関数に入れるだけです。

var showFileInList = function (ev) {
    var file = ev.target.file;

    if(document.getElementById("fileDropText")){
        var textToBeRemoved = document.getElementById("fileDropText");
        var imageToBeRemoved = document.getElementById("fileDropImg");
        textToBeRemoved.parentElement.removeChild(textToBeRemoved);
        imageToBeRemoved.parentElement.removeChild(imageToBeRemoved);
    }

    var thumb = new Image(100,100);
    thumb.src = ev.target.result;
    // var thumb = createThumb(ev.target.result);
    thumb.className = 'thumbFoto';
    thumb.title = file.name;
    thumb.alt = file.name;

    var anchor = document.createElement('a');
    anchor.className = 'thumbLink';
    anchor.href = ev.target.result;
    anchor.rel = 'album1';
    anchor.title = file.name;
    // anchor.addEventListener("click", showImagePreview, false);
    anchor.appendChild(thumb);

    // fileList.insertBefore(anchor, dropZone);
    dropZone.appendChild(anchor);

    // show fancybox
    $("a.thumbLink").fancybox({type: "inline", href: "#fileDrop"});
}

ここで作業コードを参照してください

于 2012-12-05T14:19:11.520 に答える