在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（）

回答

相关问题