1

ファンシーボックス（または他のライトボックス!!）を介してインスタフィードの画像リンクを開こうとしています。現在、Easy Fancybox プラグインとInstafeedJSを使用しています。ファンシーボックス クラスを画像リンクに追加するだけでは何も起こりません。最初の instafeed js によってオーバーライドされていると思いますか?

検索して検索しましたが、解決策が見つかりません。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>

明らかに、fancybox/lightbox 効果を適切に実行するために、ある種の JavaScript の微調整が必​​要です。コンソールにもエラーはありません。お知らせ下さい！！:)

4

2 に答える 2

4

これは私のために働く：

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-10T18:38:13.837 に答える