FadeInとFadeOutで動的に読み込むとき

Question

＃photo1 divの親指写真をクリックすると、現在の大きな画像が#inner_left divにフェードアウトされます。サム画像にはPHPがロードされています。写真は通常クリックで動作しますが、私は今、これは私が私のjqueryの部分で持っているものである次のthumb.Forをクリックしたときにそれらがフェードアウトとフェードインしたい...

$('#photo1 img').click(function(){ 


$('#inner_left img').attr('src',$(this).attr('big')); }); 

と親指をロードするPHPの一部：

foreach($imagess as $image){ 
    if($image['image_th_source'] != '' && $image['image_source'] != ''){ 
     echo ' 
      <div id=photo1> 
       <a href="#"> <img src="'.$image['image_th_source'].'" alt="'.$image['image_alt'].'" title="'.$image['image_title'].'" big="'.$image['image_source'].'" /></a> 
      </div> 
     '; 
    } 
} 

できるだけお手伝いください！

Answer 1

カントークリーンな効果を得るために、それらのイメージをプリロードすることもできます。

$('.photo1 img').click(function(){ 
var our_photo =$(this); 
$('#inner_left').fadeOut(1500, function(){ 
    $('#inner_left img').attr('src',our_photo.attr('big')); 
    $('#inner_left').fadeIn(1500); 

});}); 

助けてくれてありがとう！

Answer 2

まず、foreachイテレータ内でphoto1のid属性を使用したり、クラスを使用したり、すべてのdivのIDを変更したりする必要はありません。

あなたは、あなたのjQueryのスクリプトでこれを行うことができます

$('.photo1').click(function(){ 
    $('#inner_left').fadeOut(); 
    $('#inner_left').attr('src',$(this).attr('big')); 
    $('#inner_left').fadeIn(); 
}); 

あなたは退色が結局、このように解決した