jQuery click函数以引导模式返回instagram api中的所有图像
我一直在使用jQuery和instagrams api拼凑一个脚本。单击图像/视频时，我希望在引导模式下显示该图像/视频。当前，当您单击一个图像时，它将显示已加载的所有图像。我错过了什么？这是我的完整剧本-jQuery click函数以引导模式返回instagram api中的所有图像,jquery,twitter-bootstrap,instagram,Jquery,Twitter Bootstrap,Instagram,我一直在使用jQuery和instagrams api拼凑一个脚本。单击图像/视频时，我希望在引导模式下显示该图像/视频。当前，当您单击一个图像时，它将显示已加载的所有图像。我错过了什么？这是我的完整剧本- <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>IG</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.1.0/bootstrap-modal.pack.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
</head>
<body>
<div class="container">
<div class="row results">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () {
// Adding the above wrapper around all the code makes sure the whole
// DOM is loaded before any code is actually run. Its a good practice
// read about it here: http://api.jquery.com/ready/
var apiUrl = "https://api.instagram.com/v1/users/self/feed?access_token=[token here]&callback=?"
// This is the users url
// https://api.instagram.com/v1/media/popular?client_id=" + client_id + "&callback=?
// This is the search url for
// https://api.instagram.com/v1/locations/search?access_token=%3CACCESS_TOKEN%3E&foursquare_v2_id=447bf8f1f964a520ec331fe3
function success (instagramData) {
// This is run if the ajax call is successful
// The "instagramData" being passed to this function is the returned data from the url
if (instagramData.meta.code != 200) {
// If we don't get a 200 that means instagram threw an error.
// Instead of adding the html for images to .results div, we will put the error in there so
// we know what happend
$('.results').html('<h1>An Error Occured</h1><p>' + instagramData.meta.error_message + '</p>');
return
}
$.each(instagramData.data, function(index, gram) {
// instagramData.data is the "data" inside the returned json. There is "meta" and "data".
// index is just an incremental number for each gram. we don't need it yet.
// gram is the information for EACH gram. this $.each loops over all of them.
if (gram.type == 'image') {
// for this example we only care about images
$('.results').append('<div class="col-md-3">' +
'<p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p>' +
'<a href="#myModal" data-toggle="modal" data-img-url="' + gram.images.standard_resolution.url + '"><img class="img-thumbnail" src="' + gram.images.low_resolution.url + '"/></a>' +
'</div>')
}
if (gram.type == 'video') {
// for this example we only care about videos
$('.results').append('<div class="col-md-3">' +
'<p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p>' +
'<a href="#myModal" data-toggle="modal" data-img-url="' + gram.videos.standard_resolution.url +'"><video class="img-thumbnail" src="' + gram.videos.low_resolution.url + '"/></a>' +
'</div>')
}
//click function for returning images in modal.
$('.img-thumbnail').click(function(){
$('.modal-body').append('<img src="' + gram.images.standard_resolution.url + '">');
console.log("click");
});
});
}
$.ajax({
type: "GET",
url: apiUrl,
dataType: "json",
success: success // If successful we call the success function, which lives up above
});
});
</script>
</body>
</html>
免疫球蛋白
&时代；
情态标题
关
$（函数（）{
//在所有代码周围添加上述包装器可以确保
//DOM是在任何代码实际运行之前加载的。这是一个很好的实践
//请在此处阅读：http://api.jquery.com/ready/
var apirl=”https://api.instagram.com/v1/users/self/feed?access_token=[此处的令牌]&回调=？”
//这是用户的url
// https://api.instagram.com/v1/media/popular?client_id=“+client_id+”&回调=？
//这是的搜索url
// https://api.instagram.com/v1/locations/search?access_token=%3CACCESS_TOKEN%3E&foursquare_v2_id=447bf8f1f964a520ec331fe3
功能成功（instagramData）{
//如果ajax调用成功，则会运行该命令
//传递给此函数的“instagramData”是从url返回的数据
如果（instagramData.meta.code！=200）{
//如果我们得不到200，那就意味着instagram出错了。
//我们将把错误放在那里，而不是将图像的html添加到.results div
//我们知道发生了什么
$（'.results'）.html（'发生错误'+instagramData.meta.Error_message+''）；
回来
}
$.each（instagramData.data，函数（索引，克）{
//instagramData.data是返回的json中的“数据”。有“meta”和“data”。
//索引只是每克的增量数字，我们还不需要它。
//gram是每个gram的信息。这个$。每个循环遍历所有gram。
如果（gram.type=='image'）{
//对于这个例子，我们只关心图像
$（'.results'）。追加（''+
“”+gram.user.username+””+
'' +
'')
}
如果（gram.type=='video'）{
//在这个例子中，我们只关心视频
$（'.results'）。追加（''+
“”+gram.user.username+””+
'' +
'')
}
//单击用于在模式中返回图像的函数。
$（'.img缩略图'）。单击（函数（）{
$（'.modal body'）。追加（''）；
控制台日志（“单击”）；
});
});
}
$.ajax({
键入：“获取”，
url:apiUrl，
数据类型：“json”，
success:success//如果成功，我们称之为success函数，它位于上面
});
});
$（'.img缩略图'）$.each(instagramData.data, function(index, gram) {
// rest of your code goes here
});
// this should be outside of $.each
$('.img-thumbnail').click(function(){
// your code goes here
});
img缩略图'<a href="#myModal" data-toggle="modal" data-img-url="' +
gram.images.standard_resolution.url + '"><img class="img-thumbnail" src="' +
gram.images.low_resolution.url + '"/></a>' +
'<a href="#myModal" data-toggle="modal" data-img-url="' +
gram.videos.standard_resolution.url +'"><video class="img-thumbnail" src="' +
gram.videos.low_resolution.url + '"/></a>' +
谢谢你的回复。但现在根本不起作用。我的控制台中的错误是“uncaughtreferenceerror:gram未定义index.html:92（匿名函数）index.html:92 v.event.dispatch jquery.min.js:2 o.handle.u”我仔细查看了整个代码，为什么不将img缩略图类移到a标记上，或者为此创建一个新的。然后为a标记创建一个事件，因为在a标记中已经有url作为“数据img url”。哦，你有一个错误，因为gram只在循环中声明。我对jQuery还是相当陌生的。你介意发布一些虚拟代码示例吗？我昨晚做了一点工作，不知道如何访问循环外的“gram”数据。我想你必须把它变成一个全局变量，也许？只是需要一些方向，哈哈。我正在努力解决这个问题。这也是我第一次使用api。谢谢，因为我缺乏数据属性方面的经验，所以我的目标不正确！不过我有点接近；）。我真的很感谢你的帮助！
// this should be outside of $.each
$('.img-thumbnail').click(function(){
// your code goes here
var imgSrc = $(this).data('img-url');
// now instead of using "gram.images.standard_resolution.url"
// you can now user "imgSrc"
});