im using the Flickr api https://www.flickr.com/services/api/explore/flickr.photos.search to get some fotos, i already got the fotos and have a input where the user can specify how many fotos he want, the thing is, i need to work with the getsize flicker service, to pass him a id, and then based on where the user clicked(i have some buttons for different sizes) he should give me the specific size, but i have a problem, my first Ajax request return me some data, with the xml specific to the photos, the second Ajax request that is inside the succes of the first one, gives me the different sizes for the specific photo i must just pass the Id, here is the code that shows what i talked about:
HTML
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
#sq,
#lg-sq,
#thumb,
#small,
#mid,
#ori {
width: 100%
}
input {
width: 50px;
}
</style>
<script type="text/javascript" src="FlickrPhotosSearch.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Escolha o tamanho das imagens (em píxeis) que quer visualizar</h2>
</div>
</div>
<div class="row">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="sq">Square [75X75]</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="lg-sq">Large Square</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="thumb">Thumbnail</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="small">Small</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="mid">Medium</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Pesquisa de fotos</h2>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" id="tag">
</div>
<div class="col-lg-1">
<button type="button" class="btn btn-success" id="pesquisar">Pesquisar</button>
</div>
<div class="col-lg-1">
<button type="button" class="btn btn-alert" id="apagar">Apagar</button>
</div>
<div class="col-lg-2">
<input type="text" id="numero" class="form-control" placeholder="numero de fotos">
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div id="results"></div>
</div>
</div>
</div>
</body>
</html>
javascript
$(document).ready(function () {
var numero = 10;
var clicked = 1;
$("#sq").click(function(){
clicked = 1;
});
$("#lg-sq").click(function(){
clicked = 2;
});
$("#thumb").click(function(){
clicked = 3;
});
$("#small").click(function(){
clicked = 4;
});
$("#mid").click(function(){
clicked = 5;
});
$("#apagar").click(function () {
$("#results").html('');
});
$('#pesquisar').click(function () {
$("#results").html('');
$.ajax({
url: 'https://api.flickr.com/services/rest/?method=flickr.photos.search',
dataType: 'xml',
data: {
api_key: '2fd41b49fedfd589dc265350521ab539',
tags: $("#tag").val(),
format: 'rest'
},
success: sucessHandler,
error: errorHandler
});
function sucessHandler(data) {
var fotos = $(data).find("photo");
if ($("#numero").val() != "") {
numero = parseInt($("#numero").val());
console.log("entrou");
}
for (var i = 0; i < numero; i++) {
$.ajax({
url: 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes',
dataType: 'xml',
data: {
api_key: '2fd41b49fedfd589dc265350521ab539',
photo_id: $(fotos[i]).attr('id'),
format: 'rest'
},
success: function(dataSize){
console.log(i);
var farmId = $(fotos[i]).attr('farm');
var serverId= $(fotos[i]).attr('server');
var Id = $(fotos[i]).attr('id');
var secret = $(fotos[i]).attr('secret');
var src = "https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + Id + "_"+secret+".jpg";
$('#results').append("<img src ="+src+" width='100' height='100'>");
},
error: errorSize
});
}
function errorSize(req, status, err) {
console.log("error size");
}
}
function errorHandler(req, status, err) {
console.log("fail");
}
});
});
i get always the same image, if i dont specific the number of fotos i want i get 10(var number = 10) but all the fotos are the same, i did a console log and the [i] is always 10, what is wrong here ?:S
