Как просто создать фотогалерею при помощи jQuery

Фотогалерея представляет собой некий набор фотографий демонстрация которых происходит по каким то правилам или событиям.Чаще всего используется событие клик мышки или наведения курсора. Я покажу как в две кодовые строчки можно раскрывать фото в определенном месте страницы. И так, при помощи jquery напишем функцию клика мышки на элементе страницы:

$("#but").click(function(){   

- т.е клик на элементе с айди = but      и следующей строкой напишем что должно произойти - допустим что элемент с айди= par1 имел адрес фото(<img class="thumbnail" id="par1" src="http://demotevator.my1.ru/images4.png"> ) и мы хотим заменить это фото на фото, которое имеет ссылку элемент с id=but   т.е заменим значение атрибута src

$("#par1").attr("src","http://demotevator.my1.ru/images5.png");

полная версия кода будет выглядеть так:

<script >
$(document).ready(function(){

 $("#but1").click(function(){
 $("#par1").attr("src","http://demotevator.my1.ru/images5.png");
 });

});
</script>

Код будет работать, но существует большой недостаток - в коде присутствуют конкретные ссылки. Сейчас напишем код, в котором функция сама заменит значение атрибута на то, которое было кликнуто.

<script>
 $(document).ready(function(){
 
 $(".thumb").click(function(event) {
 $("#par1").attr("src",(event.target.src));
 });
});
 </script>

В этом коде используем "событие" клик на классе .thumb , а  (event.target.src)) - событие указывает на атрибут src и вся строчка:

$("#par1").attr("src",(event.target.src)); - означает в элементе с айди par1 значение атрибута src заменить на значение src которое указало событие клик на классе thumb

Ну и конечно же лучше один раз увидеть... как это происходит