homepage Welcome to WebmasterWorld Guest from 54.204.59.230
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jQuery slideshow / caption on the image from JSON feed
carlozdre




msg:4385413
 12:23 am on Nov 10, 2011 (gmt 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 + '" />';
});
$('#slideshow').html(htmlString);
$('#slideshow').slideshow({
timeout: 3000,
type: 'random',
fadetime: 2000
});
}
});
}
else {
/*something else*/
})


Thank you.

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved