ここに2つの問題があります:
1)下のjqueryでマウスオーバーするとフォトアルバムの写真を回転させようとしますが、マウスアウトするとループを停止できません。
2) フェードイン/フェードアウト機能を使用して回転/スライドショーを作成する方法がわかりません。
var photo_timers = new Array;
var photo = new Array;
var base_url = 'http://www.example.com';
function changeThumb( id, url )
{
document.getElementById(id).src = url;
}
$("img[id*='album_slideshow_']").live('mouseover', function() {
var image_id = $(this).attr("id");
var id_split = image_id.split('_');
var album_id = id_split[2];
$.post(base_url + '/ajax_rotate_album_photos.php', { album_id: album_id },
function(response) {
if(response.count > 0) {
for(var i=0; i < response.pid.length; i++) {
var photo_src = base_url + '/images/picturethumbs/' + response.pid[i].id + '-1.jpg';
photo[i] = new Image();
photo[i].src = photo_src;
}
for(var i=0; i < response.pid.length; i++) {
var photo_src = base_url + '/images/picturethumbs/' + response.pid[i].id + '-1.jpg';
photo_timers[i] = setTimeout("changeThumb('" + image_id + "','" + photo_src + "')", i*100*10);
}
}
}, "json");
}).live('mouseout', function() {
var image_id = $(this).attr("id");
var id_split = image_id.split('_');
var album_id = id_split[2];
$.post(base_url + '/ajax_rotate_album_photos.php', { album_id: album_id },
function(response) {
if(response.count > 0) {
for(var i=0; i < response.pid.length; i++) {
if( typeof photo_timers[i] == "number" ) {
clearTimeout(photo_timers[i]);
}
}
}
}, "json");
$(this).attr('src', base_url + '/images/albums/' + album_id + '.jpg');
});