Skip to content

Instantly share code, notes, and snippets.

@akeilox

akeilox/fb-gallery-embed.html

Forked from alexdunae/fb-gallery-embed.html
Created April 2, 2013 11:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save akeilox/5291524 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save akeilox/5291524 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. akeilox revised this gist Apr 2, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion fb-gallery-embed.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@ <h2></h2>

    viewer.attr('src', imgs[0].images[0].source)

    for (var i = 0, l = imgs.length - 1; i < l; i++) {
    for (var i = 0, l = imgs.length ; i < l; i++) {
    $('<img src="' + imgs[i].images[3].source + '" data-fullsize="' + imgs[i].images[0].source + '">').appendTo(thumbs);
    }

  2. @alexdunae alexdunae revised this gist Sep 24, 2011. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion fb-gallery-embed.html
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,6 @@ <h2></h2>
    // album info
    $.getJSON('//graph.facebook.com/' + gallery_id + '?callback=?', function(json, status, xhr) {
    title.html('<a href="' + json.link + '">' + json.name + '</a> from ' + json.from.name);
    console.log(json);
    });

    // images
  3. @alexdunae alexdunae revised this gist Sep 24, 2011. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions fb-gallery-embed.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    <!DOCTYPE html>
    <html>
    <head>
    @@ -8,6 +7,7 @@
    </head>
    <body>
    <h1>Embedded Facebook Page Photo Gallery with jQuery</h1>

    <h2></h2>
    <nav id='thumbs'></nav>
    <img id='viewer'>
    @@ -21,7 +21,7 @@ <h2></h2>

    // album info
    $.getJSON('//graph.facebook.com/' + gallery_id + '?callback=?', function(json, status, xhr) {
    title.html('<a href="' + json.link + '">' + json.name + '</a>');
    title.html('<a href="' + json.link + '">' + json.name + '</a> from ' + json.from.name);
    console.log(json);
    });

    @@ -40,7 +40,7 @@ <h2></h2>
    viewer.attr('src', $(this).attr('data-fullsize'));
    });
    });
    })('10150293213971986'); // let's go -- put the gallery ID here
    })('426067170422'); // let's go -- put the gallery ID here
    </script>
    </body>
    </html>
  4. @alexdunae alexdunae created this gist Sep 24, 2011.
    46 changes: 46 additions & 0 deletions fb-gallery-embed.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'>
    <title>Embedded Facebook Page Photo Gallery with jQuery</title>
    <style type='text/css'> #thumbs{float:left;width:200px;} #thumbs img{display:block;margin:0 0 10px;cursor:pointer;} #viewer{float:left;} </style>
    </head>
    <body>
    <h1>Embedded Facebook Page Photo Gallery with jQuery</h1>
    <h2></h2>
    <nav id='thumbs'></nav>
    <img id='viewer'>

    <script src="//code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    (function (gallery_id) {
    var title = $('h2'),
    viewer = $('#viewer'),
    thumbs = $('#thumbs');

    // album info
    $.getJSON('//graph.facebook.com/' + gallery_id + '?callback=?', function(json, status, xhr) {
    title.html('<a href="' + json.link + '">' + json.name + '</a>');
    console.log(json);
    });

    // images
    $.getJSON('//graph.facebook.com/' + gallery_id + '/photos?callback=?', function(json, status, xhr) {
    var imgs = json.data;

    viewer.attr('src', imgs[0].images[0].source)

    for (var i = 0, l = imgs.length - 1; i < l; i++) {
    $('<img src="' + imgs[i].images[3].source + '" data-fullsize="' + imgs[i].images[0].source + '">').appendTo(thumbs);
    }

    $('img', thumbs).bind('click', function(e) {
    e.preventDefault();
    viewer.attr('src', $(this).attr('data-fullsize'));
    });
    });
    })('10150293213971986'); // let's go -- put the gallery ID here
    </script>
    </body>
    </html>