2

This piece of code adds images to the DOM after dragging them into a div-element.

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);
}

This code is linked to the page using 

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

After the images are added to the webpage, I would like preview them using Fancybox. When the page is loaded (before I dragged any image onto it), this script is executed in the html-header:

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

Now how do I make sure I can preview the recently added images using Fancybox?

4

2 回答 2

0

我假设您使用 jQuery UI 可拖动对象，您可以在可拖动对象的事件中调用您的幻想stop()框，如下所示：

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

编辑：

根据您的代码，您可以简单地将您的 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 回答
0

尝试使用“责任链”模式通过单个对象路由所有 DOM 更改。这样，对象就可以跟踪对 dom 的任何更改。然后我会使用 ConversationJS 来触发一个函数，该函数可以对 DOM 进行任何更改：https ://github.com/rhyneandrew/Conversation.JS

于 2012-12-09T23:30:35.010 回答