b.fullSizeImage is null, after loading the content with JSON

[TommyKolkman]

Hello all,

First let me say that I'm still progressing in doing Javascript and PhoneGap and all, so if there is any improvement that could be done to my code, please say so!

I'm loading images from an external source (Wordpress), and then I append them to the gallery (in jQuery Mobile). When this is done, I initiate PhotoSwipe. The thumbnails load just fine, but when I click one, this error arises: b.fullSizeImage is null. The fullsize image (the a href), however, is set (checked with Firebug and Safari).

function loadLookbook(){ $.getJSON('http://www.steez.nl/?json=get_recent_posts&callback=?', { post_type: "lookbook", count: 100 }, function(data){ var rowCounter = 2; $.each(data.posts, function(key, value) { try { if(this.tags[0].slug == "available"){ $("#psGallery").append("<div class=\"gallery-item\"><a href=\""+this.attachments[0].url+"\" rel=\"external\"><img src=\""+this.thumbnail+"\" alt=\"" + this.title + "\" /></a></div>"); } } catch (err) { // No tag slug set for this item! } }); }); }

Any idea what I'm doing wrong, or is there an issue with asynchronous loaded content?

[codecomputerlove]

Hi, to my knowledge there is no issue with async content and indeed there is a jquery-mobile-ajax example in the release package. What you will have to do is every time you load in new images, you need to tell PhotoWwipe about this e.g.

Code.PhotoSwipe.Current.setImages(thumbEls);

Where thumbEls is a list of DOM anchor elements. This way PhotoSwipe can rebuild it's internal references.

Hope this helps

[TommyKolkman]

Got it now! Made a handler that tracks down the "new" DOM, and then creates the thumbEls array, (yes, from the example... can't believe I missed that!)

Thanks for pointing me in the right direction. Keep up the good work!

[TommyKolkman]

I'm sorry, one more query, and maybe someone else than codecomputerlove can look into this, because I realize this is becoming quite a personal issue now. But it might help others with the same problem.

This is my implementation now. This works, however, only in Firefox. When Code.PhotoSwipe.Current.show(startingIndex); is fired, Firefox shows the slideshow, Safari doesn't start anything. I've checked for several things:

• The click handler: this works, photoSwipeHandler() is fired
• The startingIndex[] is populated with the right data
• The z-index in Safari and Firefox doesn't seem to differ. I've increased the slideshow z-index in Safari, but it doesn't seem to matter.

Any ideas? Thanks!

function loadLookbook(){
    $.getJSON('http://www.steez.nl/?json=get_recent_posts&callback=?',
    {
        post_type: "lookbook",
        count: 100
    },
    function(data){
        $.each(data.posts, function(key, value) {
        try {
            if(this.tags[0].slug == "available"){
                $("#psGallery").append("<div class=\"gallery-item\"><a href=\""+this.attachments[0].url+"\" rel=\"external\"><img src=\""+this.thumbnail+"\" alt=\"" + this.title + "\" /></a></div>");
            }
        } catch (err) {
            alert("Oops! An error occurred: "+err+"");
        }
    });
    photoSwipeHandler();
    Code.photoSwipe('a', '#psGallery');
    }); 
}

function photoSwipeHandler(){
    var galleryEl = document.getElementById('psGallery');

    // Find all the photos in our gallery
    var thumbEls = galleryEl.querySelectorAll('a');

    if (thumbEls.length < 1) {
        return;
    }

    // Set options (optional)
    Code.PhotoSwipe.Current.setOptions({
        loop: false
    });

    // Tell PhotoSwipe about the photos
    Code.PhotoSwipe.Current.setImages(thumbEls);

    // Listen out for when the user clicks the gallery
    galleryEl.addEventListener('click', function(e){
        // If we clicked an image, start the gallery at that image
        if (e.target.nodeName !== 'IMG'){
            return;
        }

        e.preventDefault();

        var linkEl = e.target.parentNode;

        var startingIndex = 0;
        for (startingIndex; startingIndex<thumbEls.length; startingIndex++){
            if (thumbEls[startingIndex] === linkEl){
                //break;
            }
        }
        // Start PhotoSwipe
        Code.PhotoSwipe.Current.show(startingIndex);

    }, false);
}