I am setting up a Blueimp gallery for Bootstrap that shows the photos from a Flickr photoset, adapting the provided jquery. How to append a form input to each thumbnail? The input must have a defined name and a value equal to the javascript value photo.Title . Despite much googling, at present I can only append an input with the value but no name, or with name but no value.
The code, with the penultimate line not working:-
$.ajax({
url: 'https://api.flickr.com/services/rest/',
data: {
format: 'json',
method: 'flickr.photosets.getPhotos',
photoset_id: 'etc',
user_id: 'etc',
api_key: 'etc'
},
dataType: 'jsonp',
jsonp: 'jsoncallback'
}).done(function (result) {
var linksContainer = $('#links'),
baseUrl;
// Add the demo images as links with thumbnails to the page:
$.each(result.photos.photo, function (index, photo) {
baseUrl = 'https://farm' + photo.farm + '.static.flickr.com/' +
photo.server + '/' + photo.id + '_' + photo.secret;
$('<a/>')
.append($('<img>').prop('src', baseUrl + '_s.jpg'))
.append("<span><input type='text' name='Title' value='' id='Title' style='color:#000;'/></span>")
.$('#Title').val(photo.title)
.appendTo(linksContainer);
});
});
Rather than call .val()
before the element is appended, just use the value
attribute:
.append("<span><input type='text' name='Title' value='" + photo.title + "' id='Title' style='color:#000;'/></span>")
Also, ID's must be unique. ( Title
will be on multiple if this runs more than once)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.