我正在按照教程在搜索标签时显示flickr图片。我按照它的方式完全按照教程,甚至检查了jquery最新版本,以确保它提取信息。但每当我运行查询时,它都不会显示任何图片。有什么我想念的东西,因为我不确定它是什么。这是下面的代码
<link rel="stylesheet" type="text/css" href="scripts/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="scripts/jquery.1.9.1.js"></script>
<script type="text/javascript" src="scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
function searchPics(yourKeywords) {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
lang : 'en-us',
tags : yourKeywords,
tagmode : 'all',
limit : '20',
format : 'json'
},
function(data){
var imgInsert = "";
var items = [];
//create the element that holds the images
$('<div/>', {
'id': 'content',
html: items.join('')
}).appendTo('#wrapper2').insertAfter('#left_sidebar');
/* 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 == 20) return false;
var imgThumb = item.media.m.split('m.jpg')[0] + 'm.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 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 ? ' ' + 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 ? ' ' + title : '') + '</span>';
}
});
});
}
$(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();
}
searchPics(document.getElementById('keywords').value );
return false;
})
})
</script>
是fancybox的样式表,我是否需要实际创建它?我很困惑,非常感谢你的帮助。
提前谢谢