如何使用jquery在特定div中显示此脚本中的图像
我正在使用JQInstapics从Instagram()获取提要 我想更改结果图片的显示方式。我正在使用fullpage.js()并希望使用滑块分别显示每张图片。为了在滑块中显示图片,必须使用如何使用jquery在特定div中显示此脚本中的图像,jquery,jquery-plugins,fullpage.js,Jquery,Jquery Plugins,Fullpage.js,我正在使用JQInstapics从Instagram()获取提要 我想更改结果图片的显示方式。我正在使用fullpage.js()并希望使用滑块分别显示每张图片。为了在滑块中显示图片,必须使用class=“slide”(请指定用户ID和访问令牌,如文档中所述)在中显示图片; } }); }; })(jQuery); 考虑到您首先需要为fullpage.js创建所需的结构,然后在创建结构后(而不是之前)初始化fullpage.js。我在你的代码中没有看到任何对fullPage.js初始化的引用。我
class=“slide”(请指定用户ID和访问令牌,如文档中所述)在
中显示图片;
}
});
};
})(jQuery);
考虑到您首先需要为fullpage.js创建所需的结构,然后在创建结构后(而不是之前)初始化fullpage.js。我在你的代码中没有看到任何对fullPage.js初始化的引用。我尝试在JSFIDLE上重新创建整个应用程序/页面:使用所有的js、html等。你会看到,#instagram div中的图像排成一行,而不是像我希望的那样在滑块中(尽管代码显示的东西看起来应该是在生成滑块)。
(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);