Javascript callback na fb.api

[Verwijderd]

Hoi,

Ik ben bezig met het opzetten van een fotoalbum die gevuld wordt door middel van Facebook. Aan de hand van het album id op Facebook wil ik het album weergeven d.m.v. Masonry of Isotope. Wat me tot nog toe gelukt is, is dat het album gevuld wordt met afbeeldingen. Echter: na het inladen van de foto's dient er een javascriptje gerund te worden (de isotope/masonry call), maar dit lijkt dus niet helemaal goed te gaan.

Dit is mijn code:

JavaScript:

<?php

/*
    Template Name: Gallery
*/

get_header();
?>

<script type="text/javascript">
        $(document).ready(function () {

            var albumid = <?php echo $album_id; ?>

                $.ajaxSetup({cache: true});
                $.getScript('//connect.facebook.net/en_US/sdk.js', function () {


                FB.init({
                    appId: '...',
                    version: 'v2.2', // or v2.0, v2.1, v2.0
                    authResponse: {
                        accessToken: '...'
                    }
                });

                FB.api('/' + albumid + '/photos?type=album', 'get', function (response) {
                    if (response && !response.error) {
                        $.each(response.data, function (i) {
                            FB.api(
                                "/" + response.data[i].id + "/picture",
                                function (response) {
                                    if (response && !response.error) {
                                        $('#album').append('<li><img src="' + response.data.url + '" /></li>');
                                    }
                                }
                            );
                        });
                        $('#album').isotope({
                            percentPosition: true,
                            itemSelector: 'li'
                        });
                    }
                });
            });
        });
</script>


    <ul id="album"></ul>

<?php
get_footer();
?>

Als ik de gegenereerde html kopieer en plak en dan de de isotope functie uitvoer, dan werkt het wel. Run ik die functie op het verkeerde moment?

[ Voor 13% gewijzigd door Verwijderd op 20-07-2015 11:00 ]

[Janoz]

Volgens mij mist er ten eerste een beschrijving van wat er niet werkt, wat je verwacht en wat er daadwerkelijk gebeurt. Ten 2e mis ik een haakje op regel 30.

[Verwijderd]

Had een en ander ge-edit in het tekstveld hierboven, is niet helemaal goed gegaan. Wat er niet werkt: Wat hij zou moeten doen, is alle itemselectors (<li>) afgaan en die zo positioneren dat de li's als een soort van baksteenconstructie naast elkaar worden gepositioneerd. (zie http://isotope.metafizzy.co/)

De ul krijgt position: relative; height: 0px; als styling en de li's blijven ongestyled.

[Krilo_89]

Je werkt alleen met plaatjes toch? Doordat de plaatjes later geladen worden, weet Isotope de hoogte niet en zet deze dus op 0px. Wanneer je later in je Developer tools de height zou aanpassen naar bijv. 1200px, dan zou je wel het resultaat zien wat je zou willen.
Je moet eerst de Imagesloaded library includen en isotope pas activeren nadat alle images geladen zijn. Zie hier voor een voorbeeld: http://isotope.metafizzy.co/v1/demos/images.html

Dit is uit mijn hoofd wat er fout gaat bij jou, maar ik kan er naast zitten, omdat ik geen werkend voorbeeld heb.

[Verwijderd]

Ik g a het proberen, alleen denk ik niet dat dit het probleem is (misschien was dit wel een vervolgprobleem ) aangezien de li's ook inline styling moeten hebben gekregen (welliswaar niet de goede, maar oke.)

[Krilo_89]

Verwijderd schreef op maandag 20 juli 2015 @ 11:23:
Ik g a het proberen, alleen denk ik niet dat dit het probleem is (misschien was dit wel een vervolgprobleem ) aangezien de li's ook inline styling moeten hebben gekregen (welliswaar niet de goede, maar oke.)

Probeer als itemSelector een class mee te geven ipv een element. In het voorbeeld bij isotope wordt er nergens met elementen gewerkt, maar met classes. Dat zorgt er waarschijnlijk voor dat jou LI geen inline style meekrijgt.
Als je alleen met images werkt, heb je sowieso ook die ImagesLoaded nodig, maar daar kom je daarna wel achter .

[Verwijderd]

Raar, mijn code ziet er nu zo uit. Heb de selectors verandered naar een div en de imagesloaded plugin gebruikt. Probleem blijft hetzelfde en de selectors krijgen geen inline styling.

JavaScript:

<script type="text/javascript">
$(document).ready(function () {

            var albumid = <?php echo $album_id; ?>

                $.ajaxSetup({cache: true});
            $.getScript('//connect.facebook.net/en_US/sdk.js', function () {


                FB.init({
                    appId: '..',
                    version: 'v2.2', // or v2.0, v2.1, v2.0
                    authResponse: {
                        accessToken: '...'
                    }
                });

                FB.getLoginStatus(function (response) {
                    if (response.authResponse) {
                        console.log(response.authResponse.accessToken);
                    }
                });


                FB.api('/' + albumid + '/photos?type=album', 'get', function (response) {
                    console.log(response);
                    if (response && !response.error) {

                        $.each(response.data, function (i) {

                            FB.api(
                                "/" + response.data[i].id + "/picture",
                                function (response) {
                                    if (response && !response.error) {
                                        $('#album').append('<div class="grid-selector"><img src="' + response.data.url + '" /></div>');
                                    }
                                }
                            );
                        });

                        var $container = $('#album');

                        $container.imagesLoaded( function(){
                            $container.isotope({
                                itemSelector : '.grid-selector'
                            });
                        });
                    }
                });
            });
        });
 </script>


    <div id="album"></div>

[Verwijderd]

Wacht. Ik deed net een refresh en toen deed die het wel ineens. Bij een volgende refresh deed die het niet meer.. En wanneer ik een time-out eromheen zet, blijkt het wel gewoon te werken..

[ Voor 24% gewijzigd door Verwijderd op 20-07-2015 12:05 ]

[Krilo_89]

En als je je imagesLoaded + Isotope nou in een Window.load function zet en de rest van het script niet.

Nu hangt het er net vanaf hoelang het duurt voor de images geladen zijn (vanaf facebook), waardoor het niet soepel loopt (soms zijn de li's later gegenereerd dan dat isotope initialized is). Dan heb je geen delay ook nodig, want dat is geen waterdichte methode.