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
– Adam Waite

2012-05-09 22:37:40 +00:00
Commented May 9, 2012 at 22:37 — Adam Waite
– Adam Waite, Commented May 9, 2012 at 22:37

net.uk.sweet · Accepted Answer · 2012-05-10 10:23:59Z

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, 2012 at 10:23

answered May 9, 2012 at 23:35

net.uk.sweet

12.4k3 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adam Waite Over a year ago

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

net.uk.sweet Over a year ago

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 Over a year ago

Good news Adam! Glad you got it sorted.

Collectives™ on Stack Overflow

Dynamically load image into javascript function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related