Instafeed.js 和 jQuery 彩盒

Question

我正在尝试在 Instafeed.js 图像上设置 jQuery 颜色框。这两个脚本单独运行良好，但每当我尝试将颜色框 class 设置为 Instafeed.js 模板部分内的元素时，颜色框不再起作用。

但是，Colorbox 在 Instafeed 脚本之外正常工作，Colorbox class 设置为 <a> 或 <img>。

Instafeed

var userFeed = new Instafeed({
      get: 'user',
      userId: ,
      limit: 20,
      accessToken: '',
      resolution: 'standard_resolution',
      template: '<a href="{{model.images.standard_resolution.url}}" class="box"><img src="{{image}}" /></a>',
    });
    userFeed.run();

彩盒

$(document).ready(function(){
            $(".box").colorbox({transition:"fade"});
        });

这里也有同样的问题：https://github.com/stevenschobert/instafeed.js/issues/198 但由于某些原因，给出的解决方案不起作用。使用此解决方案，当我单击图像时没有任何反应。使用我之前的代码，显示在 post 中，它以不同的方式打开图像 window。

要将 Colorbox 设置到 Instafeed 中，是否有具体的操作？能做的都试过了，网上介绍的不多

Answer 1

我假设您的问题是您在这些元素实际添加到 DOM 之前查询 $(".box")。在 Instafeed 将锚元素的标记添加到 DOM.

之后，您需要分配 Colorbox

看看 Instafeed's API，他们为这类事情提供了一个 after 回调。这应该有效：

var userFeed = new Instafeed({
      get: 'user',
      userId: ,
      limit: 20,
      accessToken: '',
      resolution: 'standard_resolution',
      template: '<a href="{{model.images.standard_resolution.url}}" class="box"><img src="{{image}}" /></a>',
      after: function(){
          $(".box").colorbox({transition:"fade"});
      },
    });
    userFeed.run();

Instafeed.js 和 jQuery 彩盒

Instafeed.js and jQuery colorbox

javascript

jquery

colorbox

instafeedjs