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.

Answer 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.