Добрый день =) В этом уроке мы будем создавать галерею с прокруткой картинок, которые будут плавно вылетать. Вот демка, а вот ресурсы для скачивания.
Мы будем использовать JQuery и некоторые CSS3 свойства стиля. Основная идея состоит в том, что в некотором меню есть альбом, где каждый элемент будет появляться в одной линии. Эскизы контейнера прокрутки автоматические, когда пользователь перемещает мышь влево или вправо.

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

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

Итак, начнем!

Наш HTML в основном будет состоять из diva и меню списка. Во-первых, давайте создадим оболочку:

<div id="st_main" class="st_main">

</div>

Внутри нашей оболочки мы добавим следующее:

<img src="images/album/1.jpg" alt="" 
    class="st_preview" style="display:none;"/>

<div class="st_overlay"></div>

<h1>Mark Sebastian</h1>

<div id="st_loading" class="st_loading">
	<span>Loading...</span>
</div>

Первый элемент нашего полного изображения для предварительного просмотра. Наложение будет фиксированным Div который будет растягиваться на весь экран. Мы также добавить название и загрузку.

Затем добавим неупорядоченный список, где каждый элемент Li будет содержать ее названия и картинки. Последний элемент Li будет содержать некоторые отличия для текста,

<ul id="st_nav" class="st_navigation">
	<li class="album">
		<span class="st_link">
			Newest Collection
			<span class="st_arrow_down"></span>
		</span>
		<div class="st_wrapper st_thumbs_wrapper">
			<div class="st_thumbs">
				<img src="images/album/thumbs/1.jpg"
				    alt="images/album/1.jpg"/>
				<img src="images/album/thumbs/2.jpg"
				    alt="images/album/2.jpg"/>
				...
			</div>
		</div>
	</li>
	...
	<li>
		<span class="st_link">
			About
			<span class="st_arrow_down"></span>
		</span>
		<div class="st_about st_thumbs_wrapper">
			<div class="st_subcontent">
				<p>
					Some description
				</p>
			</div>
		</div>
	</li>
</ul>

Миниатюры получат alt значение путь в полный размер. Это может быть не правильное использование Alt атрибут, но это просто очень удобно для наших функций, мы будем использовать его таким образом.

Давайте взглянем на этот стиль. Во-первых, давайте сбросим стили всех элементов и определить общие стили:

*{
	margin:0;
	padding:0;
}
body{
	font-family:"Myriad Pro","Trebuchet MS",
	    Helvetica, sans-serif;
	font-size:16px;
	color:#fff;
	background-color:#000;
	overflow:hidden;
}
h1{
	margin:20px;
	font-size:40px;
}

Далее, мы будем определять стиль в полный размер, наложения и загрузки Div:

.st_main img.st_preview{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
}
.st_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../images/pattern.png)
	    repeat-x bottom left;
	opacity:0.3;
}
.st_loading{
	position:fixed;
	top:10px;
	right:0px;
	background:#000 url(../images/icons/loader.gif)
	    no-repeat 10px 50%;
	padding:15px 40px 15px 60px;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
	opacity:0.6;
}

При установке ширина изображения должна быть всегда 100%, мы уверены, что он занимает всё горизонтальное пространство на странице. В очень больших экранах изображение может выглядеть неровно. В нашей демо мы используем максимальную ширину 1600 пикселей, чтобы время загрузки было удолитворительным.

ul.st_navigation{
	position:absolute;
	width:100%;
	top:140px;
	left:-300px;
	list-style:none;
}

Левое значение равно -300 пикселей. Если вы используете больше названий в списке предметов, возможно, потребуется изменить это значение.

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

ul.st_navigation li {
	float:left;
	clear:both;
	margin-bottom:8px;
	position:relative;
	width:100%;
}

ul.st_navigation li span.st_link{
	background-color:#000;
	float:left;
	position:relative;
	line-height:50px;
	padding:0px 20px;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}

Далее, мы определяем стиль для пролетов вверх / вниз для открывания и закрывания с миниатюрами контейнера:

ul.st_navigation li span.st_arrow_down,
ul.st_navigation li span.st_arrow_up{
	position:absolute;
	margin-left:15px;
	width:40px;
	height:50px;
	cursor:pointer;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down{
	background:#000 url(../images/icons/down.png)
	    no-repeat center center;
}
ul.st_navigation li span.st_arrow_up{
	background:#000 url(../images/icons/up.png)
	    no-repeat center center;
}

Контейнер с эскизами будет позиционироваться абсолютно, и мы хотим, скрыть какой-либо вертикальное переполнения:

.st_wrapper{
	display:none;
	position: absolute;
    width:100%;
    height:126px;
    overflow-y:hidden;
	top:50px;
    left:0px;
}

Устоновим высоту в 120 пикселей, мы хотим оставить пространство так, чтобы тень изображения внутри не была отрезана.

.st_thumbs{
    height:126px;
    margin: 0;
}

Картинки будут иметь тень и небольшой интервал:

.st_thumbs img{
    float:left;
    margin:3px 3px 0px 0px;
    cursor:pointer;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	opacity:0.7;
}

.st_about{
	display:none;
	position:absolute;
	top:50px;
    left:0px;
	opacity:0.6;
}

И, наконец, текстовый контейнер:

.st_subcontent{
	background:#000;
	padding:30px;
	-moz-box-shadow:0px 0px 10px #000;
	-webkit-box-shadow:0px 0px 10px #000;
	box-shadow:0px 0px 10px #000;
}

И это все стили! Давайте немножко "поколдуем"! =)

В нашей JQuery функции мы первое, что сделаем - определим несколько переменных:

var $loader	= $('#st_loading');

var $list = $('#st_nav');

var $currImage = $('#st_main').children('img:first');

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

$('<img>').load(function(){
	$loader.hide();
	$currImage.fadeIn(3000);

	setTimeout(function(){
		$list.animate({'left':'0px'},500);
	},
	1000);
}).attr('src',$currImage.attr('src'));

BuildThumbs () вычисляет ширину всех контейнеров мин. Нам нужно, чтобы значение функции автоматически устонавливала прокрутку:

buildThumbs();

function buildThumbs(){
	$list.children('li.album').each(function(){
		var $elem = $(this);
		var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
		var $thumbs = $thumbs_wrapper.children(':first');

		var finalW = $thumbs.find('img').length * 183;
		$thumbs.css('width',finalW + 'px');

		makeScrollable($thumbs_wrapper,$thumbs);
	});
}

Далее, мы определяем действие.

$list.find('.st_arrow_down').live('click',function(){
	var $this = $(this);
	hideThumbs();
	$this.addClass('st_arrow_up').removeClass('st_arrow_down');
	var $elem = $this.closest('li');
	$elem.addClass('current').animate({'height':'170px'},200);
	var $thumbs_wrapper = $this.parent().next();
	$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click',function(){
	var $this = $(this);
	$this.addClass('st_arrow_down').removeClass('st_arrow_up');
	hideThumbs();
});

Прежде чем определить hideThumbs () функцию, мы указываем, что происходит при нажатии в полный размер и, пока она грузиться показать Div с загрузкой.

$list.find('.st_thumbs img').bind('click',function(){
	var $this = $(this);
	$loader.show();
	$('<img class="st_preview"/>').load(function(){
		var $this = $(this);
		var $currImage = $('#st_main').children('img:first');
		$this.insertBefore($currImage);
		$loader.hide();
		$currImage.fadeOut(2000,function(){
			$(this).remove();
		});
	}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
	$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
	$(this).stop().animate({'opacity':'0.7'});
});

Функции, чтобы скрыть картинки выглядит следующим образом:

function hideThumbs(){
	$list.find('li.current')
		 .animate({'height':'50px'},400,function(){
			$(this).removeClass('current');
		 })
		 .find('.st_thumbs_wrapper')
		 .hide(200)
		 .andSelf()
		 .find('.st_link span')
		 .addClass('st_arrow_down')
		 .removeClass('st_arrow_up');
}

И, наконец, мы определим makeScrollable (), которая автоматически прокручивает картинки Div по горизонтальному движению мыши:

function makeScrollable($outer, $inner){
	var extra = 800;

	var divWidth = $outer.width();

	$outer.css({
		overflow: 'hidden'
	});

	var lastElem = $inner.find('img:last');
	$outer.scrollLeft(0);

	$outer.unbind('mousemove').bind('mousemove',function(e){
		var containerWidth = lastElem[0].offsetLeft + 
		    lastElem.outerWidth() + 2*extra;
		var left = (e.pageX - $outer.offset().left) * 
		    (containerWidth-divWidth) / divWidth - extra;
		$outer.scrollLeft(left);
	});
}

И теперь добавим следующие элементы в голову нашего HTML-документа для включения:

<script src="js/cufon-yui.js" type="text/javascript">
</script>
<script src="js/Quicksand_Book_400.font.js" 
type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('span,p,h1',{
		textShadow: '0px 0px 1px #ffffff'
	});
</script>

Ну вот и всё! =) Мы надеемся, что вам понравился этот урок!