Instafeedjs 和 Fancybox 如何让灯箱在 instafeed 的 javascript 输出上工作答案

【问题标题】：Instafeedjs and Fancybox how to get lightbox to work on javascript output of instafeedInstafeedjs 和 Fancybox 如何让灯箱在 instafeed 的 javascript 输出上工作
【发布时间】：2013-10-17 03:25:52
【问题描述】：

我正在尝试通过fancybox（或任何其他灯箱！！）打开我的instafeed 图片链接。我目前正在使用Easy Fancybox plugin 和InstafeedJS。简单地将fancybox 类添加到图像链接中没有任何作用。我认为它被我最初的 instafeed js 覆盖了？

我已经搜索和搜索，但找不到解决方案。 Fancybox 在整个站点的所有其他“常规”图像上正常工作。我还尝试复制我的 instagram 提要的输出，并简单地将 HTML 粘贴到页面中，fancybox 仅在我删除时才能在此测试中正常工作

id="instafeed"

来自

<div id="instafeed"></div>

我目前的javascript如下：

<script type="text/javascript">
   var feed = new Instafeed({
    get: 'tagged',
    tagName:  'mytagishere',
    limit: 14,
    links: false,
    clientId: 'myclientidishere',
    template: '<div class="col-xs-4"><a rel="group" class="fancybox" href="{{image}}"><img style="width:100%;" class="fancybox" src="{{image}}" /></a></div>',
    resolution: 'standard_resolution'
    });
feed.run();
</script>

<div id="instafeed"></div>

很明显，我需要做一些 javascript 调整才能使 fancybox/lightbox 效果正确执行！我的控制台也没有错误。请指教！！ :)

【问题讨论】：

您的图片是由 instafeed 动态添加到 DOM 中的，而 fancybox v1.3.4（由 EasyFancybox 使用）不支持动态添加的元素。如果有帮助，请检查此stackoverflow.com/a/9084293/1055987

标签： javascript jquery wordpress fancybox instafeedjs

【解决方案1】：

这对我有用：

var feed = new Instafeed({
              get: 'user',
              userId: 483799418,
              accessToken: '483799418.ab103e5.944a7cd8f8514fba80dd622d685e151b',
              limit: 12,
              sortBy: 'most-liked',
              after: function () {
                var images = $("#instafeed a").fancybox();
                $.each(images, function(index, image) {
                  var delay = (index * 75) + 'ms';
                  $(image).css('-webkit-animation-delay', delay);
                  $(image).css('-moz-animation-delay', delay);
                  $(image).css('-ms-animation-delay', delay);
                  $(image).css('-o-animation-delay', delay);
                  $(image).css('animation-delay', delay);
                  $(image).addClass('animated flipInX');
                })
              },
              template: '<a rel="group" class="fancybox" href="{{model.images.standard_resolution.url}}" target="_blank"><img style="width:100%;" class="fancybox" src="{{image}}" /><div class="likes">&hearts; {{likes}}</div></a>'
            });
            feed.run();
        });

来源：https://github.com/stevenschobert/instafeed.js/issues/44

【讨论】：

【解决方案2】：

使用 Bootstrap CDN 和 Instafeedjs：

var feed = new Instafeed({
        get: "user",
        userId:'xxxxxxxxxxx',
        tagName: 'tagged',
        clientId: 'xxxxxxxxxxxxxxxxxxxx',
        accessToken: 'xxxxxxxxxxxxxxxxxxx',
        limit: 12,
        sortBy: 'most-liked',
        template: '<div class="col-lg-3 col-sm-3 col-xs-4"><a href="{{link}}"><img class="img-responsive" src="{{image}}" /></a></div>',
        resolution: 'standard_resolution'
    });

feed.run();

然后运行。该脚本将连续显示 4 张图像。

【讨论】：