Welcome to WebmasterWorld Guest from 54.226.32.234

Forum Moderators: open

Message Too Old, No Replies

jQuery slideshow / caption on the image from JSON feed

     

carlozdre

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

5+ Year Member



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 + '" />';
});
$('#slideshow').html(htmlString);
$('#slideshow').slideshow({
timeout: 3000,
type: 'random',
fadetime: 2000
});
}
});
}
else {
/*something else*/
})


Thank you.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month