我正在使用 Flickr API,我想为每个图像创建一个 onlick 弹出 div,它以更大的形式显示图像,例如http://fancybox.net/。
如何实现这一点,以便将 onclick 函数应用于 div 容器中的每个 div?
项目:http: //jsfiddle.net/phippsy20/rtzp8/
jQuery:所以这个语句使 div
for (var i = 0; i < 210; i++) {
$('<div />').attr('id', 'photo-' + i).addClass('photo').appendTo('#photo-container');
}
此函数从 flickr 加载图片作为背景图像:
$.each(data.photos.photo, function(i, photo) {
var imgURL = 'http://farm' + photo.farm + '.staticflickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_n.jpg';
console.log(imgURL);
// Pre-cache image
$('<img />').attr({'src': imgURL, 'data-image-num': i}).load(function() {
console.log('image loaded');
var imageDataNum = $(this).attr('data-image-num');
$('#photo-' + imageDataNum).css('background-image', 'url(' + imgURL + ')').removeClass('fade-out').addClass('fade-in');
})