###前提・実現したいこと
お世話になります。宜しくお願い致します。
件名の通りですが、いろいろと試行し行き詰まっています。
ご教示いただけませんでしょうか。
JSは以下の通りです。
画像取得 Instafeed.js
スライダー slick
■実現したいこと
こちらのサイトにあるInstagramの部分に近いものを作りたいです。
http://beyondarchitecture.jp/news/
■参考にしたサイト
https://idotdesign.net/blog/web/js/instafeed/ (主にインスタ登録の仕方)
https://www.nxsw.co.jp/articles/2015/jquery-instagram-feed.html
http://thenorthernfoundry.com/slick-slider-with-instagram-feed/
###発生している問題
フィードは取得できているようで、テスト的に投稿した5枚ほどの画像は
表示されるのですが、スライダーが動きません。
他の箇所にもslickスライダーを設置していて、そちらは正常に
動いています。
###該当のソースコード
【HTML】 <div id="instagram"> <div id="slideIg"> <ul id="instafeed" class="slide"></ul> </div><!-- /.slideIg --> </div><!-- /#instagram --> 【JS】 $(function(){ //インスタグラム var feed = new Instafeed({ get: 'user', //ハッシュタグから取得 userId: userID, //ユーザーIDを指定 accessToken: 'アクセストークン', //アクセストークンを指定 sortBy:'random', //並び順をランダムに links: true , //画像リンク取得 limit: 20, //取得する画像数を設定 resolution: 'low_resolution', //画像サイズを設定 template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank" /></a></li>', clientId: 'クライアントID' //Instagram DevelopersのクライアントID }); feed.run(); $('#slideIg ul').slick({ arrows : false, autoplay : true, autoplaySpeed : 0, cssEase : 'linear', speed : 5000, rows : 2, slidesToShow : 4, slidesToScroll : 1 }); });
###その他の質問
インスタグラムのフィード取得にあたりまして、
instafeeds.jsを紹介しているサイトが
多くありましたが、サイトによってJSの書き方が
違い大別すると2種類ありました。
⇒クライアントIDを使う場合
参考サイト:https://idotdesign.net/blog/web/js/instafeed/
var feed = new Instafeed({ get: 'tagged', //ハッシュタグから取得 tagName: '東京タワー', //好きなハッシュタグを設定 sortBy:'random', //並び順をランダムに links: true , //画像リンク取得 limit: 20, //取得する画像数を設定 resolution: 'low_resolution', //画像サイズを設定 template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank" /></a><span>{{caption}}</span><span>like:{{likes}},comments:{{comments}}</span></li>', clientId: 'xxxxxxx' //Instagram DevelopersのクライアントID }); feed.run(); });
⇒ アクセストークンが使われている場合(以下のコードは以下のサイトからそのままの抜粋となります。)
https://www.nxsw.co.jp/articles/2015/jquery-instagram-feed.html
var userFeed = new Instafeed({ get: 'user', //ユーザー名から取得します userId: *******, //ユーザーIDを指定 accessToken: '******.*****.*********************', //アクセストークンを指定 limit: 10, //取得投稿の上限を設定 sortBy: "random", //ランダムで並び替え template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"></a></li>', after: function() { $('#scroller ul').simplyScroll(); //Instafeed実行後、simplyScrollを実行して横スクロールさせる }, }); userFeed.run();
結果を言いますと、下のアクセストークンを使わないとフィードが表示されませんでした。
こうした違いについてお詳しい方がいらっしゃいましたら、
併せてご教示いただけませんでしょうか?
また優しく解説していただけましたらさらに助かります。
お忙しいところ恐縮いたしますが、
何卒よろしくお願い申し上げます。
回答1件
あなたの回答
tips
プレビュー