我正在混合检索我的 Flickr 相册照片,然后逐个添加属性。我成功地用这段代码获取了所有元素。基本上,它会在相册图片中逐一添加一个带有“img”类的部分。
我想为下一个“img”元素设置动画(我用不透明度进行了测试),但生成的代码似乎适用于一个巨大的“img”属性(这是合乎逻辑的,因为在加载 flickr img 之前 DOM 元素是空的。
这里要清除的是之前的 HTML:
<div id="img">
<!-- Picture container goes here -->
<section class="img">
<!-- Img container goes here - 1 item created one section -->
</section>
</div>
然后我用这个 JS/Jquery 检索我的 Flickr 元素(也许答案就在那里)
<script>
$(document).ready()
var apiKey = '216ef208ff620b0dfa1700e505fba309';
var galeryno = '72157635214178998';
$(function (flickr) {
$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=' + galeryno + '&format=json&jsoncallback=?',
function (data) {
$.each(data.photoset.photo, function (i, item) {
var photoFull = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_b.jpg';
var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_t.jpg';
var photoID = item.id;
//use another ajax request to get the tags of the image
$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
function (data) {
if (data.photo.tags.tag != '') {
var tagsArr = new Array();
$.each(data.photo.tags.tag, function (j, item) {
tagsArr.push('<a href="http://www.flickr.com/photos/tags/' + item._content + '">' + item.raw + '</a>');
});
var tags = tagsArr.join(', ');
}
//imgCont is important i guess - maybe it's not creating the best kind of DOM element to work laterby
var imgCont = '<section class="img"><a href=' + photoFull + ' data-lightbox="Chaton"title=' + data.photo.title._content + '><img class="" src=' + photoFull + ' alt=""</a></section>'
if (data.photo.description._content != '') {
imgCont += '<p><span class="infoTitle">Description:</span> ' + data.photo.description._content + '</p></div></div>';
}
$(imgCont).appendTo('#img');
});
});
});
});
</script>
最后,对于所有新的“img”元素,问题是我想在图像上一个一个地创建事件。我尝试使用来自 Jquery API 的代码只是为了检查触发后单击“下一个 img”是否会消失。它不起作用,因为所有元素都不是不同的,所以我的照片都立即消失了:
$(document).ready(function () {
$(".top").click(function () {
$(".img").next().animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function () {});
});
});
谢谢你读了这么久。我希望我说得够清楚。
PS:对不起小猫
我做了一个小提琴,因为它更容易调试:http: //jsfiddle.net/AYV7d/