我正在使用JQInstapics从Instagram获取Feed(http://projects.craftedpixelz.co.uk/jqinstapics/)。
我想更改结果图片的显示方式。我使用fullpage.js(https://github.com/alvarotrigo/fullPage.js)并想使用滑块分别显示每张图片。为了在幻灯片中显示图片,图片必须以<div>
显示class="slide" (<div class="slide"><img></div>)
。
所以我对jQuery还不是很好(所以)因此我很难找到显示图片的方式来实现它的工作。我喜欢各种方式,但没有一个工作,我总是得到一排照片。
以下是整个JQInstapics脚本:Ive标记了我认为可行的更改。
(function ($) {
$.fn.jqinstapics = function (options) {
// Defaults
var defaults = {
"user_id": null,
"access_token": null,
"count": 10
};
var o = $.extend(defaults, options);
return this.each(function () {
// Vars
var elem = $(this),
url = "https://api.instagram.com/v1/users/" + o.user_id + "/media/recent?access_token=" + o.access_token + "&count=" + o.count + "&callback=?";
// Get the images
$.getJSON(url, function(data){
$.each(data.data, function (i, val) {
// created the div var to try and give the image the div container it needs to be a slide. wanted to append it as the first elemet to the elem var that creates the display.
var div = $("<div class='slide'>").appendTo(elem),
li = $("<li/>").appendTo(div),
a = $("<a/>", {"href": val.link, "target": "_blank"}).appendTo(li),
// added the </div> to try and close out the slide div.
img = $("<img/></div>", {"src": val.images.thumbnail.url}).appendTo(a);
if (val.caption){
a.attr("title", val.caption.text);
}
});
});
if(o.user_id == null || o.access_token == null){
elem.append("<li>Please specify a User ID and Access Token, as outlined in the docs.</li>");
}
});
};
})(jQuery);