Instafeed.js и цветовое поле jQuery

Я пытаюсь установить jQuery Colorbox для изображений Instafeed.js. Оба сценария отлично работают по отдельности, но всякий раз, когда я пытаюсь установить класс colorbox для элемента внутри части шаблона Instafeed.js, Colorbox больше не работает.

Однако Colorbox корректно работает вне скрипта Instafeed, если для класса Colorbox установлено значение <a> или <img>.

Инстафид

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, но данное решение по некоторым причинам не сработало. С этим решением ничего не происходит, когда я нажимаю на изображение. С моим предыдущим кодом, показанным в сообщении, он открывал изображение в другом окне.

Есть ли что-то конкретное, что нужно сделать, чтобы установить Colorbox в Instafeed? Я пробовал все, что мог, и в Интернете об этом не так много.


javascript jquery colorbox instafeedjs
person dbsso    schedule 22.12.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я предполагаю, что ваша проблема заключается в том, что вы запрашиваете $(".box") до того, как эти элементы были фактически добавлены в DOM. Вы захотите назначить Colorbox после того, как Instafeed добавит разметку для элементов привязки в DOM.

Глядя на API Instafeed, они предоставляют обратный вызов 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();
person Jack    schedule 22.12.2015
comment
Это действительно работает! Спасибо за объяснение, которое вы предоставили, я должен был уделить больше внимания. - person dbsso; 22.12.2015