Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

jQuery slideshow / caption on the image from JSON feed

12:23 am on Nov 10, 2011 (gmt 0)

New User

10+ Year Member

joined:Mar 24, 2007
votes: 0

How can I add a caption with the title on top of the images I've got from this Flickr JSON feed?

The slideshow is working, the JSONURL var gets the photos I need, in a #slideshow div and from there, the slideshow does its job.

But I would like to add a caption with the title on top of the images, which have to dissapear with the image and have the next caption appear when the slideshow shows the next image and so on.

I have tried to add it like that:

<p>'+ item.title +'</p>
in the same htmlString, but gets all the titles from the feed and shows them all on the page.

I have also tried to get select the alt attribute of the image (the alt gets the correct value if I use
alt="' + item.title + '"
) and place the content in a var and then display it in a span or p, but is the same thing.

How should I do it?

 $(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;

var JSONURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=d512a7bb4b7c0a6eb65d5095464ebf3f&format=json&privacy_filter=1&media=photos&tag=london&has_geo=1&accuracy=11&content_type=1&extras=geo,owner_name,url_m&page=1&per_page=20&radius_units=km&radius=5&lat="+lat+"&lon="+lon+"&jsoncallback=?";
jQuery.getJSON( JSONURL, getJSONimages);
function getJSONimages(data) {
var htmlString = "";
$.each(data.photos.photo, function(i,item){
htmlString += '<img src="' + item.url_m + '" />';
timeout: 3000,
type: 'random',
fadetime: 2000
else {
/*something else*/

Thank you.