Need help with Flickr/JSON/Javascript issue when displaying gallery images -
Need help with Flickr/JSON/Javascript issue when displaying gallery images -
wondering if can help me. i'm trying set weekly photo competition page pulling in photos flickr gallery, can't images display. works ok groups, having problems gallery code. getting right json response, can't results display on page grouping images do.
here's javascript:
$(function() { var map; var markers = []; var infowindow; // gallery photos var visiblegallery; $.getjson("http://api.flickr.com/services/rest/" + "?method=flickr.galleries.getphotos" + "&api_key=xxxx" + "&photoset_id=xxxx" + "&extras=geo,tags,url_sq,url_t,url_s,url_m,url_o" + "&format=json&jsoncallback=?", function(data, textstatus) { var htmlstring = '<div id="weekcontainer">'; var weeks = sortintoweekarrays(data.photos.photo); $.each(weeks, function(i, week) { var weeknumber = + 1; var numberofweeks = weeks.length - 1; htmlstring += '<div id="week' + weeknumber + '">'; htmlstring += '<ul class="weeks">'; if(i < numberofweeks) { htmlstring += '<li><a class="weeklinksnext" href="#"><span>next</span></a></li>'; } var sunday = new date(week.monday.toutcstring()); sunday.setdate(week.monday.getdate() + 6); htmlstring += '<li class="weektitle">week ' + weeknumber + ':</li><li class="weekdate"> ' + week.monday.format("ddd d mmm") + ' — ' + sunday.format("ddd d mmm") + '</li>'; if(i > 0) { htmlstring += '<li><a class="weeklinksprev" href="#"><span>previous</span></a></li>'; } htmlstring += '</ul>'; if(week.winner !== undefined) { htmlstring += '<p class="gallerytitlefirst">photo of week</p>'; htmlstring += '<ul class="imageswinners">'; htmlstring += '<li class="winner"><a href="http://www.flickr.com/photos/' + week.winner.owner + '/' + week.winner.id + '" target="_blank">'; htmlstring += '<img title="' + week.winner.title + '" src="' + week.winner.url_m + '" alt="' + week.winner.title + '" />'; htmlstring += '</a></li>'; htmlstring += '<li class="name"><a href="http://www.flickr.com/photos/' + week.winner.owner + '/' + week.winner.id + '" target="_blank">' + week.winner.title + '</a></li>'; htmlstring += '<li class="owner">' + 'by <a href="http://www.flickr.com/photos/' + week.winner.owner + '" target="_blank">' + week.winner.ownername + '</a></li>'; htmlstring += '</ul>'; } htmlstring += '<p class="gallerytitle">our other favourites week</p>'; htmlstring += '<ul class="imagesrunnersup">'; $.each(week.images, function(i, item) { htmlstring += '<li><a href="http://www.flickr.com/photos/' + item.owner + '/' + item.id + '" target="_blank">'; htmlstring += '<img title="' + item.title + '" src="' + item.url_sq + '" alt="' + item.title + '" />'; htmlstring += '</a></li>'; if(item.longitude == "0" && item.latitude == "0") { homecoming true; } var latlng = new google.maps.latlng(item.latitude, item.longitude); var marker = new google.maps.marker( { position: latlng, map: map, title:item.title }); marker.content = '<a href="http://www.flickr.com/photos/' + item.owner + '/' + item.id + '" target="_blank"><img title="' + item.title + '" src="' + item.url_s + '" alt="' + item.title + '" /></a>'; markers.push(marker); }); htmlstring += '</ul>'; htmlstring += '</div>'; }); htmlstring += '</div>'; $('div#weekviewer').append(htmlstring); $('div#weekcontainer > div').css('float', 'left').css('margin-right', '30px'); $('div#weekcontainer').width(weeks.length * 450); $('div#weekcontainer .weeklinksprev') .click(function(){ $('div#weekviewer').animate({scrollleft: '-=450'}, 'slow'); homecoming false; }); $('div#weekcontainer .weeklinksnext') .click(function(){ $('div#weekviewer').animate({scrollleft: '+=450'}, 'slow'); homecoming false; }); }); }); function sortintoweekarrays(items) { var weeks = []; // returns single dimension array containing single dimension arrays $(items).each(function(i, item) { var mon = new date(item.dateadded * 1000); monday.setdate(monday.getdate() - monday.getday() + 1); monday.sethours(0,0,0,0); var week, thisweek; (i in weeks) { week = weeks[i]; if(week.monday - mon == 0) { thisweek = week; break; } } if(thisweek === undefined) { thisweek = { monday: monday, images: [] }; weeks.push(thisweek); } if($.inarray('winner', item.tags.split(" ")) > -1) { thisweek.winner = item; } else { thisweek.images.push(item); } }); homecoming weeks.sort(function(first, second) { homecoming (first.monday > second.monday) - (first.monday < second.monday); }); } any help fantastic :)
regards, david
worked out after help friend. missing date_upload value in extras argument , item.dateadded needed alter item.upload.
javascript json flickr flickr-api
Comments
Post a Comment