建立一個貓頭鷹旋轉木馬從Instafeed.js的照片

Question

我目前正試圖建立一個圖像輪播（使用貓頭鷹旋轉木馬），動態拉動Instagram照片（使用Instafeed.js）。我將Owl Carousel v2與一些自定義腳本一起使用，將我的圖像分成兩個水平行，如網格。我也有我的Instafeed.js正確設置，以根據標籤名稱拉入圖像。

我在同步這兩個插件時遇到了一些麻煩，所以我的貓頭鷹傳送帶從我的Instafeed.js源中提取圖像。

爲了顯示的目的，我將旋轉木馬和Instagram Feed div分開，以便您可以看到它們都可以作爲單獨的插件工作（請注意，要顯示的Instagram圖像必須輸入您自己的客戶端ID）。

HTML：

<section id="demos"> 
    <div class="row"> 
     <div id="owl2row-plugin" class="owl-carousel"></div> 
    </div> 
</section> 

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

JS：

$(function() { 
    var feed = new Instafeed({ 
     get: 'tagged', 
     tagName: 'awesome', 
     clientId: 'YOUR CLIENT ID', 
     limit: 25, 
     template: '<div class="item"><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"/></a></div>', 
     before: function() { 
      for (var i = 0; i < 24; i++) { 
       $newdiv = $('<div class="item"></div>').html('<img src="http://placehold.it/200x200">'); 
       $('#owl2row-plugin').append($newdiv); 
      } 
      var owl = $('#owl2row-plugin'); 
      owl.owlCarousel({ 
       loop: true, 
       margin: 10, 
       nav: true, 
       dots: false, 
       owl2row: 'true', 
       owl2rowTarget: 'item', 
       owl2rowContainer: 'owl2row-item', 
       owl2rowDirection: 'utd', 
       responsive: { 
        0: { 
         items: 2 
        }, 
        600: { 
         items: 3 
        }, 
        1000: { 
         items: 5 
        } 
       } 
      }); 
     } 
    }); 
    feed.run(); 
}); 

對於那些你熟悉Instafeed.js，也不會是有意義的增加：

target: 'owl2row-plugin', 

這樣照片就可以注入我的旋轉木馬了嗎？我注意到，這樣做只會打破傳送帶：/

任何幫助！

FIDDLE：http://jsfiddle.net/njacoy/zcrwvsuu/embedded/result/

Answer 1

呼叫貓頭鷹旋轉木馬後 Instafeed加載圖像。

var feed = new Instafeed({ 
    get: 'tagged', 
    tagName: 'awesome', 
    clientId: 'YOUR CLIENT ID', 
    limit: 25, 
    template: '<div class="item"><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"/></a></div>', 
    after: function() { 
     for (var i = 0; i < 24; i++) { 
      $newdiv = $('<div class="item"></div>').html('<img src="http://placehold.it/200x200">'); 
      $('#owl2row-plugin').append($newdiv); 
     } 
     var owl = $('#owl2row-plugin'); 
     owl.owlCarousel({ 
      loop: true, 
      margin: 10, 
      nav: true, 
      dots: false, 
      owl2row: 'true', 
      owl2rowTarget: 'item', 
      owl2rowContainer: 'owl2row-item', 
      owl2rowDirection: 'utd', 
      responsive: { 
       0: { 
        items: 2 
       }, 
       600: { 
        items: 3 
       }, 
       1000: { 
        items: 5 
       } 
      } 
     }); 
    } 
}); 
feed.run(); 

Answer 2

HTML代碼

<section class="instagram container-fluid mt-md "> 
    <div class="row"> 
      <div id="owl2row-plugin" class="owl-carousels"> 
       <div id="instafeed" class="owl2row-plugin"> 
       </div> 
      </div> 
    </div> 
</section> 

jQuery代碼

$(document).ready(function(){ 

     var feed = new Instafeed({ 

      //get: 'user', 
      userId: 5411567, 
      accessToken: '3722752.467ede5.edc5948480384f54915ea14617ce6716', 
      get: 'user', 
      //tagName: 'awesome', 
      clientId: 'fdf210ab13ce47e48ac861bac822d1a3', 
      limit: 25, 


      after: function() { 

       var owl = $('.owl2row-plugin'); 
       owl.owlCarousel({ 
        loop: true, 
        margin: 0, 
        navText:['',''], 
        nav: true, 
        dots: false, 
        owl2row: 'true', 
        owl2rowTarget: 'item', 
        owl2rowContainer: 'owl2row-item', 
        owl2rowDirection: 'utd', 
        responsive: { 
         0: { 
          items: 3 
         }, 
         600: { 
          items: 5 
         }, 
         1000: { 
          items: 10 
         } 
        } 
       }); 
      }, 
      template: '<div class="item"><a href="{{link}}" target="_blank"><span><img src="{{image}}" alt="{{caption}}"/></span></a></div>', 

     }); 

     feed.run(); 

    });