Instafeedjs和Fancybox如何讓lightbox在instafeed的javascript輸出上工作

我想通過fancybox（或任何其他燈箱!!）打開我的instafeed圖像鏈接。我目前使用Easy Fancybox plugin和InstafeedJS。只需將fancybox類添加到圖像鏈接就什麼都不做。我認爲這是由我的初始instafeed js覆蓋？Instafeedjs和Fancybox如何讓lightbox在instafeed的javascript輸出上工作

我已搜索和搜索，但無法找到解決方案。 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 /燈箱效果正確執行的！我的控制檯中也沒有錯誤。請指教！！ :)

來源

2013-10-17 tinesays

您的圖像通過instafeed動態添加到DOM，fancybox v1.3.4（由EasyFancybox使用）不支持動態添加元素。檢查這個http://stackoverflow.com/a/9084293/1055987如果有幫助 – JFK

這個工作對我來說：

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

來源

2014-07-10 18:38:13 francoCoro

使用引導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個圖像。

來源

2017-09-19 10:30:48

Instafeedjs和Fancybox如何讓lightbox在instafeed的javascript輸出上工作

回答

相關問題