Простенькая галерейка с jQuery

То, что предстоит выполнить, можно посмотреть на демо странице, или скачать котовый пример к себе на компьютер:

Приступим к html разметке:

<div class="personal_galery">
	<div class="big_photo">
		<img alt="" src="/images/tsunami_1.jpg" />
	</div>	
	<div class="scroll-pane">
		<a href="/images/tsunami_1.jpg"><img alt="Коментарий к картинке" src="/images/tsunami_1.jpg" /></a> 
		<a href="/images/tsunami_2.jpg"><img alt="Коментарий к картинке" src="/images/tsunami_2.jpg" /></a> 
		<a href="/images/tsunami_3.jpg"><img alt="Коментарий к картинке" src="/images/tsunami_3.jpg" /></a> 
		<a href="/images/tsunami_1.jpg"><img alt="Коментарий к картинке" src="/images/tsunami_1.jpg" /></a> 
		<a href="/images/tsunami_2.jpg"><img alt="Коментарий к картинке" src="/images/tsunami_2.jpg" /></a> 
		<a href="/images/tsunami_3.jpg"><img alt="Коментарий к картинке" src="/images/tsunami_3.jpg" /></a> 			
	</div>
</div>

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

Стили в примере так же максимально упрощены, но никто не мешает сделать оформление более сложным:

.personal_galery {
margin:40px auto;
width:650px;
}
.big_photo {
margin-bottom:10px;
width:100%;
height:488px;
}
.scroll-pane {
width:100%;
text-align:center;
}
.scroll-pane img {
margin:0 2px 10px;
width:100px;
}

И, наконец, js - он тоже не содержит сложных комбинаций. Вся его задача сводится к тому, что бы при клике на уменьшеной копии картинки показать полное изображение, в специально отведенном для этого, блоке. Что бы смена изображения выглядела приятнее, добавлено немного анимационных эфектов.

$(function () {
//galery		
	$("div.scroll-pane a").click(function(){
		var path = $(this).attr("href");
		var alt = $(this).attr("alt");
		$("div.big_photo").animate({opacity: 0}, 1000, function(){
			$(this).html("<img src='" +path + "' />").find("img").bind("load",function(){
				$(this).parent().animate({opacity: 1},100);
			});
		});
		return false;		
	});
});	

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