Hi I am currently trying to get the PlayStation Blog from flickr api working but the ID I get for PlayStation is not working with Jquery Mobile can anyone help?
This is the ID I get for the blog 8309149@N08
Here is the relevant HTML code as I am trying to display the images in a grid format.
<section id="photos" class="header_default footer_default" data-role="page" data-title="Photo grid">
<div data-role="content">
<div class="ui-grid-c" id="photolist"></div>
</div><!-- content -->
</section><!-- photos page -->
<section id="showphoto" data-role="page">
<div data-role="content">
<div id="myphoto"></div>
</div><!-- content -->
</section><!-- show photo page -->
<script src="http://api.flickr.com/services/feeds/photos_public.gne?id=8309149@N08&format=json&tags=viewsource"></script>
Here is the Javascript
function jsonFlickrFeed(data) {
var output = '';
for (var i=0; i < data.items.length; i++) {
var title = data.items[i].title;
var link = data.items[i].media.m.substring(0,56);
var blocktype =
((i % 4) === 3) ? 'd':
((i % 4) === 2) ? 'c':
((i % 4) === 1) ? 'b':
'a';
output += '<div class="ui-block-' + blocktype + '">';
output += '<a href="#showphoto" data-transition="fade" onclick="showPhoto(\'' + link + '\',\'' + title + '\')">';
output += '<img src="' + link + '_q.jpg" alt="' + title + '">';
output += '</a>';
output += '</div>';
}
$('#photolist').html(output);
}
function showPhoto(link, title) {
var output = '<a href="#photos" data-transition="fade">';
output +='<img src="' + link +'_b.jpg" alt="' + title + '">';
output +='</a>';
$('#myphoto').html(output);
}
The URL you're using to fetch images doesn't return any results. http://api.flickr.com/services/feeds/photos_public.gne?id=8309149@N08&format=json&tags=viewsource
returns 0 images tagged with viewsource
. Try http://api.flickr.com/services/feeds/photos_public.gne?id=8309149@N08&format=json
.