所以我一直在研究一个过滤器系统,它允许我使用 phpFlickr 作为 CodeIgniter 中的库来显示来自 Flickr API 的数据。我目前使它运行良好并且功能齐全,尽管动画不是我想要的。我遇到的问题是,当我将内容切换到另一组图像时,它会突然到位并且没有流畅的动画。我不确定处理此动画的最佳方法是什么,因为我对动画还很陌生。此外,如果有办法可以清理代码,那就太好了。这是我拥有的代码。
控制器
$sets = $this->phpflickr->photosets_getList('66096679@N07');
$recent = $this->phpflickr->photos_search(array('privacy_filter' => 5, 'user_id' => '66096679@N07'));
foreach ($sets['photoset'] as $key => $value) {
$setid = $value['id'];
$photos_in_set = $this->phpflickr->photosets_getPhotos($setid, 'original_format', NULL);
$set_array[$key] = str_replace(' ', '-', $value['title']);
foreach ($photos_in_set['photoset']['photo'] as $key2 => $value2) {
$photo_array[$key][$key2]['set'] = str_replace(' ', '-', $value['title']);
$photo_array[$key][$key2]['title'] = $value2['title'];
$photo_array[$key][$key2]['photo_url_thumb'] = $this->phpflickr->buildPhotoURL($value2, "large");
$photo_array[$key][$key2]['photo_url_large'] = $this->phpflickr->buildPhotoURL($value2, "original");
}
}
$data['photos'] = array_reverse($photo_array);
$data['sets'] = $set_array;
看法
<div id="filter">
<a href="#" data-id="show-all" onclick="return false">All</a>
<?php foreach($sets as $key => $value): ?>
<a href="#" data-id="<?= $value ?>" onclick="return false"><?= str_replace('-', ' ', $value) ?></a>
<?php endforeach; ?>
</div>
<section id="photos">
<?php foreach($photos as $photoset): ?>
<?php foreach($photoset as $key): ?>
<a class="fancybox-media" href="<?= str_replace('http:', '',$key['photo_url_large']) ?>" data-filter="<?= $key['set'] ?>">
<img src="<?= str_replace('http:', '', $key['photo_url_thumb']) ?>" />
</a>
<?php endforeach; ?>
<?php endforeach; ?>
</section>
Javascript
$(document).ready(function(){
$( '#filter a' ).click(function() {
var set = $(this).data('id');
$("#photos a[data-filter='"+ set +"']").fadeIn('20');
$("#photos a[data-filter!='"+ set +"']").fadeOut('0');
if($(this).data('id') === 'show-all') {
$('#photos a'). fadeIn('20');
}
});
});
这是上述代码的实时示例的链接。如果您能帮助我平滑动画,将不胜感激。就数据的设置方式而言,这似乎是最好的方法,因为所有图像都被列为私有图像,因此它们仅在网站上可用。任何帮助或方向都非常感谢,只是在此静止不动。如果您对此有任何疑问,那么我很乐意相应地更新我的问题。非常感谢您提前提供的帮助!