Execute jQuery after changing DOM

Question

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?

How do you drag your image? You should call `$("a.thumbLink").fancybox();` on `stop()` drag event. — SubRed, Dec 05 '12 at 14:16
If you are using fancybox v1.3.4, that version doesn't support dynamically added elements. Check http://stackoverflow.com/a/9084293/1055987 for a workaround. Version 2.x uses `live` so you just need to initialize fancybox normally. — JFK, Dec 05 '12 at 19:42

SubRed · Answer 1 · 2012-12-05T17:24:36.080

0

I assume you use jQuery UI draggable object, you can call your fancybox on stop() event of your draggable object, like this:

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

EDIT:

Based on your code you can simply put your fancybox caller in function of showFileInList, like this:

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

See working code HERE

edited Dec 05 '12 at 17:24

answered Dec 05 '12 at 14:19

SubRed

3,169
1
18
17

The code I use for dragging images from my desktop to my browser is just javascript. No jQuery, no Ajax or anything else. You can find it here: http://www.student.kuleuven.be/~s0179967/code.js – user1879060 Dec 05 '12 at 14:32
Thanks a lot for your efforts to help me out already. But I probably haven't made myself sufficiently clear. The goal is to drag images from your desktop to the dropzone. There a thumbnail is automatically generated. Then when you click the thumbnail, the full image should be displayed with fancybox. Just like the images in the purple zone below. Try it out on http://www.student.kuleuven.be/~s0179967/public/index.html Javascript code can be found here: http://www.student.kuleuven.be/~s0179967/public/js/code.js – user1879060 Dec 05 '12 at 17:08
@user1879060 try my edited [FIDDLE](http://jsfiddle.net/aanred/2daab/), it now works as you want actually. See also javascript that you have to change under function `showFileInList`. – SubRed Dec 05 '12 at 17:26
Strange. When I add your single line of code it shows the full "fileDrop" div with fancybox. Pushing next also changes the image title in fancybox, but not the image itself... – user1879060 Dec 05 '12 at 17:56
@user1879060 Sure, you're welcome :) You may also write down here your own answer so that the others can refer to it if they have similar problem. – SubRed Dec 06 '12 at 08:57

score 0 · Answer 2 · answered Dec 09 '12 at 23:30

Try routing all of your DOM changes through a single object using the "Chain of Responsibility" pattern. That way the object can keep track of any changes to the dom. Then I would use ConversationJS to fire a function that does whatever you want on DOM change: https://github.com/rhyneandrew/Conversation.JS

Execute jQuery after changing DOM

2 Answers2