Instafeed.js에서 사진을 올린 올빼미 회전 목마 만들기

Question

현재 Instagram 사진 (Instafeed.js 사용)을 동적으로 가져 오는 이미지 회전 장치 (Owl Carousel 사용)를 만들고 있습니다. Owl Carousel v2를 일부 사용자 정의 스크립트와 함께 사용하여 이미지를 격자처럼 두 개의 가로 행으로 분할합니다. 또한 Instafeed.js가 태그 이름을 기반으로 이미지를 가져 오기 위해 올바르게 설정되어 있습니다.

올빼미 회전 목마가 내 Instafeed.js 피드의 이미지를 가져 오도록 이러한 두 플러그인을 동기화하는 데 문제가 있습니다.

표시 목적으로 나는 회전식 컨테이너와 Instagram 피드 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 : 그것은 이해가되지 것 Instafeed.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(); 
}); 

추가 할 :

target: 'owl2row-plugin', 

사진이 내 회전 목마에 주입되도록하려면? 나는 이것을 수행하는 것이 컨베이어를 깨기 만한다는 것을 알았습니다./

아무 것도 도움이됩니다!

뿐인 : 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(); 

    });