Добрый день =) В этом уроке мы будем создавать галерею с прокруткой картинок, которые будут плавно вылетать. Вот демка, а вот ресурсы для скачивания.
Мы будем использовать 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>
Ну вот и всё! =) Мы надеемся, что вам понравился этот урок!