在mouseenter上使用.attr（）打開Shadowboxes（）

我希望能夠將鼠標懸停在shadowbox上以打開它，並且已經搜索了一段時間，但我仍然不完全理解如何執行它的概念。這是我的HTML：在mouseenter上使用.attr（）打開Shadowboxes（）

<table id="tapaintings"> 
      <tr> 
       <td><a id="shadowbox[paintings]" href="images/painting1.jpg" rel="shadowbox[paintings]" title="painting1"> <img src="images/thumbnails/t_painting1.jpg" alt="painting"></a></td> 
       <td><a id="shadowbox[paintings]" href="images/painting2.jpg" rel="shadowbox[paintings]" title="painting2"> <img src="images/thumbnails/t_painting2.jpg" alt="painting"></a></td> 
      </tr> 
      <tr> 
       <td><a id="shadowbox[paintings]" href="images/painting3.jpg" rel="shadowbox[paintings]" title="painting3"> <img src="images/thumbnails/t_painting3.jpg" alt="painting"></a></td> 
       <td><a id="shadowbox[paintings]" href="images/painting4.jpg" rel="shadowbox[paintings]" title="painting4"> <img src="images/thumbnails/t_painting4.jpg" alt="painting"></a></td> 
      </tr> 
      <tr> 
       <td><a id="shadowbox[paintings]" href="images/painting5.jpg" rel="shadowbox[paintings]" title="painting5"> <img src="images/thumbnails/t_painting5.jpg" alt="painting"></a></td> 
       <td><a id="shadowbox[paintings]" href="images/painting6.jpg" rel="shadowbox[paintings]" title="painting6"> <img src="images/thumbnails/t_painting6.jpg" alt="painting"></a></td> 
      </tr> 
     </table>

和我的jQuery至今：

$(document).ready(function() { 
    $("img").mouseenter(function() { 
     $(this).attr("src", "images/painting1.jpg"); 
    }); 
});

我剛纔一直在試圖讓第一圖像此刻放大，但我希望能夠懸停在任何縮略圖上，並能夠打開我的shadowbox。我也希望能夠不斷循環瀏覽照片，以便我可以關閉使用mouseleave的shadowbox。我是jQuery的初學者，所以我一直無法理解這個概念，所以任何幫助將不勝感激。

來源

2013-07-23 user1730357

它是一個jQuery插件？ –

我想你錯過了jQuery對象聲明前面的$。另外，還要確保你有你的文件擴展名試試這個（我還沒有驗證）（.JSP;巴紐等）：

$(document).ready(function(){ 
    $("img").mouseenter(function() { 
     $(this).attr("src", images/painting1.jsp); 
    }); 
});

來源

2013-07-23 01:54:48 Brad

好吧，我添加了現金符號和.jpg到最後，但我的shadowbox仍然不會打開。我也只是暫時使用這個源代碼，直到我能夠使mouseenter函數正常工作。 – user1730357

你的意思是這樣？

$(function(){ 
    $('#tapaintings a').mouseenter(function(){ 
     var id = $(this).attr('id'); 
     $('a#' + id + ' img').animate({ 
      'height' : '80px', 
      'width' : '80px' 
     }); 
    }); 
.........

見this fiddle

來源

2013-07-23 02:43:28

我認爲你大概有這個想法，但是當我試圖實現這個代碼時，它不起作用。也可以根據我已經擁有的尺寸爲照片設置動畫而不是選擇高度和寬度？我需要做的最後一件事是在右側爲照片製作動畫，而不是在縮略圖頂部放大。 – user1730357

在mouseenter上使用.attr（）打開Shadowboxes（）

回答

相關問題