Открытие Shadowboxes на mouseenter с использованием .attr()

Question

Я хочу, чтобы у меня зависало над теневым ящиком, чтобы открыть его, и я искал какое-то время, но я до сих пор не совсем понимаю концепцию того, как это сделать. Вот мой HTML:

<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. Я новичок в jQuery, поэтому я не смог понять эту концепцию, поэтому любая помощь будет оценена по достоинству.

Answer 1

Я думаю, что вам не хватает $ перед объявлениями объекта jQuery. Также убедитесь, что у вас есть расширение на файл Попробуйте это (я до сих пор не проверено) (.jsp;; .png и др.):

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

Answer 2

ли вы имеете в виду, как это.?

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

См this fiddle