fancybox上的圖片滾動效果

Question

我在我現有的.jpg fancybox縮略圖圖片上覆蓋了一個.png，其餘的作品完美。

我有9個圖像，並編寫了一個循環來創建我的fancybox庫在PHP中。我正在使用.png覆蓋現有的.jpg縮略圖。

這是我的PHP代碼：

<?php 
     $i=1; 
     $title=array("", "t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9"); 

     for($i; $i<10; $i++) 
     { 

     echo "<div id='galeria' class='one-third column alpha'> 
      <a title='".$title[$i]."' class='fancybox' rel='group' href='../img/galeria/big".$i.".jpg'><img src='../img/galeria/thumb".$i.".jpg' alt='' /></a> 
     </div><!--end 1\3 -->"; 

      $i++; 
      echo "<div id='galeria' class='one-third column'> 
      <a title='".$title[$i]."' class='fancybox' rel='group' href='../img/galeria/big".$i.".jpg'><img src='../img/galeria/thumb".$i.".jpg' alt='' /></a> 
     </div><!--end 1\3 -->"; 
      $i++; 
      echo "<div id='galeria' class='one-third column omega'> 
      <a title='".$title[$i]."' class='fancybox' rel='group' href='../img/galeria/big".$i.".jpg'><img src='../img/galeria/thumb".$i.".jpg' alt='' /></a> 
      </div><!--end 1\3 -->"; 
     } 
    ?> 

我使用的onMouseOver和onmouseout沒有成功嘗試。 （我是新來的JS和jQuery，如果你能提供詳細的幫助，我真的會讚歎它）。

Answer 1

我不知道如果我明白你的問題，但試試這個：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script>  
    $(function(){ 
     $(".fancybox").hover(
      function(){ 
       $(".imagem-hover",this).fadeIn(100); 
      }, 
      function(){ 
       $(".imagem-hover",this).fadeOut(100); 
      } 
     ); 
    }); 
</script> 
<style> 
    * {position:relative;} 
    .fancybox .imagem-hover {position:absolute; z-index:1; display:none;} 
</style> 
<div id="galeria"> 
    <a class="fancybox" href="imagemGrande.jpg"> 
     <img class="imagem-hover" src="over.png" /> 
     <img src="thumb.jpg" /> 
    </a> 
    <a class="fancybox" href="imagemGrande.jpg"> 
     <img class="imagem-hover" src="over.png" /> 
     <img src="thumb.jpg" /> 
    </a> 
    <a class="fancybox" href="imagemGrande.jpg"> 
     <img class="imagem-hover" src="over.png" /> 
     <img src="thumb.jpg" /> 
    </a> 
</div>