Javascript Question

error in limiting fetched images from flickr

I'm trying to fetch images from flickr using a search box. here is my script:

<script type="text/javascript">
function searchPics(yourKeywords) {
var over = '<div id="overlay">' +
'<img id="loading" src="../img/load.gif">' +
'</div>';
$(over).appendTo('body');
setTimeout(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
lang : 'en-us',
tags : yourKeywords,
tagmode : 'all',
limit : '30',
format : 'json'
},
function(data){
$('#changehead').html('Search Results : <span style="display:inline;padding:0px;font-size:100%;text-transform:uppercase;color:#ff0000">'+ yourKeywords +'</span>');
var imgInsert = "";
var items = [];
$("#no").remove();
//create the element that holds the images
$('<div/>', {
'id': 'content',
html: items.join('')
}).appendTo('#noo').insertAfter('#header');

$("#no1").remove();

/* each image loaded from flickr will have a div as parent then the main parent
will apend to the wrapper */
$.each(data.items, function(i,item){
if (i == 30) return false;
var imgThumb = item.media.m.split('m.jpg')[0] + 'q.jpg'; //size of the image small max 240px
var imgLarge = item.media.m.split('m.jpg')[0] + 'b.jpg'; //large size of the image for fancybox

imgInsert += '<div class="avatar">';
imgInsert += '<a href="' + imgLarge + '" rel="flickr_group" class="big_img" title="' + item.title + '">';
imgInsert += '<img title="' + item.title + '" src="' + imgThumb + '" alt="' + item.title + '" />';
imgInsert += '</a></div>';
});
var cachedItems = $(imgInsert).data('cached', imgInsert);

$('#content').append(imgInsert).addClass(yourKeywords).data('cached', data.items);

/* create a history list and insert it into the left sidebar */
var listChached = '';
listChached += '<div style="background:#fff;text-align:center;color:#000;padding:8px" class="history_list">';
listChached += '<a class="' + yourKeywords + '_chached" href="javascript:;">';
listChached += yourKeywords + '</a></div>';

$(listChached).appendTo('#left_sidebar').insertAfter('form');

$('.' + yourKeywords + '_chached').click(function(){

/* if the content has items then remove them
and insert the chathed itmes */
if ( $('#content').length > 0 ) {
$('#content').empty();
$('#content').html(cachedItems);

//open the images using fancybox for the cached images
$("a[rel=flickr_group]").fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'titlePosition': 'over',
'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});
}
})

//open the images using fancybox for the new search
$("a[rel=flickr_group]").fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'titlePosition': 'over',
'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});
});$('#overlay').remove();
}, 1000);

}

$(function(){
$('.search_form').submit(function(){
//if it has been a search allready remove the old content and replace it with the new search
if ( $('#content').length > 0 ) {
$('#content').remove();
} else{$('#content').html('NO RESULTS'); }
searchPics(document.getElementById('keywords').value );
return false;
})
})
</script>


Here I'm using limit:30 , but when i search images i get only 20 images on all searches. Can someone please point out the error ?

Answer

To limit the fetched images from flickr, you should use,

 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
            {
                lang    : 'en-us',
                tags    : yourKeywords,
                tagmode : 'all',
                limit   : '20',
                format  : 'json'
            },