Dynamically load image into javascript function

Question

I am using a Javascript photo viewer plug in (here->http://www.photoswipe.com/). I want to dynamically update photos that the plug is attached to as the user swipes through images.

I have a Javascript object (I use the Joose framework) that is responsible for updating it's properties based on the result of an ajax call to a php script that parses image elements.

Here's my code:

<script>
    (function(window, PhotoSwipe){

        domInjector = new DOMInjector();
        domInjector.init();

        document.addEventListener('DOMContentLoaded', function(){

            var options = {
                 preventHide: true,
                 getImageSource: function(obj)
                 {
                    return obj.url;
                 },

                 getImageCaption: function(obj)
                 {
                    return obj.caption;
                 }
            },

            instance = PhotoSwipe.attach(
            [
                domInjector.output
            ], 

            options 

            );

            instance.show(0);

    }, false);


}(window, window.Code.PhotoSwipe));

domInjector.output should look something like this -> { url: '" + this.masterObject.elementArray[1].imageLink + "', caption: 'Image 001'}

where this.masterObject.elementArray[1].imageLink is the URL of an image.

But... because the ajax function takes a finite time to complete domInjector.output is empty for a few seconds and the image swipe plug in has no elements!

The rest of my code is good, all working ok. I just don't know how i can sort of inject the updated domInjector.output once the ajax function has completed?

Sorry, this one is very difficult to explain. Any help would be great though.

can I do something with the event listener? – Adam Waite May 09 '12 at 22:37 — Adam Waite, May 09 '12 at 22:37

net.uk.sweet · Accepted Answer · 2012-05-10T10:23:59.373

1

Instead of instantiating the PhotoSwipe plugin within the handler for the document.DOMContentLoaded event, I think you need to do it in the handler for an event you fire from the DOMInjector class once your Ajax call has successfully returned. You could also consider passing in a callback function as a parameter to your DOMInjector class and executing that when the Ajax call returns. Either way, the output of that call will be available to you when you instantiate PhotoSwipe.

edited May 10 '12 at 10:23

answered May 09 '12 at 23:35

net.uk.sweet

12,444
2
24
42

good plan, can I just do it by calling a normal function do you think? I'll have a go tonight when i'm home – Adam Waite May 10 '12 at 09:00
1

You could pass a callback function into your DOMInjector class which it would execute when the Ajax call returns and instantiate your plugin in that. – net.uk.sweet May 10 '12 at 10:23
Good news Adam! Glad you got it sorted. – net.uk.sweet May 11 '12 at 09:17

Dynamically load image into javascript function

1 Answers1