网站上的Facebook图片库(PHP / JSON)

时间:2013-04-25 17:36:12

标签: php jquery json facebook-graph-api image-gallery

我想特别想要一个facebook画廊(https://www.facebook.com/media/set/?set=a.188384271935.125248.188249156935&type=3)在网站上展示。

我尝试的所有JSON示例似乎都已经过时了facebook的当前API。

https://graphs.facebook.com/10151038651796936?fields=images提取我需要的JSON数据。但是,当我将其插入到我找到的示例中,甚至是Facebook的API中的示例时,它都不会加载。 (使用本地托管的Jquery 1.9)

这是我尝试使用的代码,但我认为它已经过时了,因为facebook目前的API。

        <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> from ' + json.from.name);
            });

            // 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'));
              });
            });
          })('188384271935'); //  put the gallery ID here

我希望代码能够选择显示的图片数量(最近的),并且可以轻松更改图库ID。

我对JSON非常不熟悉,如果你能展示一个代码片段的例子,我会非常感激它。

1 个答案:

答案 0 :(得分:0)

您的代码适用于我。您应该仔细检查您的jQuery库是否确实正在加载,并且页面上的元素包含viewerthumbs ID。 viewer应该是img代码,而thumbs应该是某种类型的块级元素,例如div

由于您未使用jQuery(document).ready来对此进行调用(至少不是来自提供的代码),因此您还应确保在viewer和{的标记之后包含此脚本标记{1}}。

顺便说一句,如果您使用thumbs作为缩略图,那么它们会更小一些。