загрузка изображения jQuery

Question

Мне нужна помощь в jQuery. Я хочу создать небольшую, очень, очень легкую картинную галерею.

Я хочу разместить пару маленьких картинок слева от моей страницы. Нажав одну из этих маленьких картинок, я хотел бы загрузить эту картинку в другой раздел, где она отображается в полном размере.

<a href="image1_big.jpg" class="smallpics" /><img src="image1_small" /></a>
<a href="image2_big.jpg" class="smallpics" /><img src="image2_small" /></a>
<a href="image3_big.jpg" class="smallpics" /><img src="image3_small" /></a>
<div id="bigpic" /><img src="image1_big" /></div>

Все мои попытки jQuery потерпели неудачу, так как я не мог изменить источник изображения в этом bigpic div.

Answer 1

Это должно сделать это для вас:

$(function(){
   $("a.smallpics").click(function(e){
      $("#bigpic").html('<img src="' + this.href + '" />');
      e.preventDefault();
   });
});

Я мог бы также использовать это (вместо аналогичной строки в предыдущем примере):

$("#bigpic").empty().append($("<img />").attr('src', this.href));

Но первый вариант фактически выполнит его чуть-чуть быстрее. Только с одним вызовом вы не сможете заметить разницу, поэтому, если второй вариант легче читать или писать, вы можете использовать это.