главная

Теги:


Красивое портфолио с помощью jQuery

Сегодня мы создадим анимированную портфолио галерею с помощью jQuery. Галерея будет содержать скролл для миниатюр и место для контента, где будет отображаться информация про портфолио. Изображение может быть увеличено при нажатии на него, создавая дополнительный слой.

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

Давайте начнем с HTML структуры.

Разметка

Для начала мы создадим структуру контентной области. Для этого мы создадим главный div с классом “pg_content”. Внутри мы разместим главный заголовок с классом и id “pg_title”, контейнер для просмотра с id “pg_preview” и элементы описания с классом “pg_description”. Дивы с описанием будут также иметь индивидуальные классы, например “pg_desc1" и “pg_desc2″




Shape Company Website Design


Summer of Love

...

images/large/1.jpg
images/large/2.jpg ...


Project Description


A description comes here



Project Description


A description comes here


...


Technologies Used


A text comes here



Technologies Used


A text comes here


...

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

Скроллер миниатюр будет иметь следующую структуру:

...
...

И в конце, мы добавим div для полупрозрачного наложения:

Давайте теперь взглянем на стили.

CSS

Начинаем со сброса всех отступов и с общего стиля для body:

*{
margin:0;
padding:0;
}
body{
background: #564c4c url(../webtreats2.jpg) repeat top left;
font-family:"Trebuchet MS","Myriad Pro", Helvetica, sans-serif;
font-size:12px;
color: #111;
overflow-x:hidden;
}

Оверлей (наложение) будет иметь следующие стили:

#overlay{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background: #000;
display:none;
opacity:0.9;
}

Если хотите, чтобы все это также работало в IE, пожалуйста, добавьте свойство filter opacity.
Стили для слайдера миниатюр будут такими:

#thumbContainter{
position:fixed;
top:0px;
left:0px;
bottom:0px;
margin:0;
width:175px;
padding:0 10px;
background:transparent url(../bg.png) repeat top left;
border-right:1px solid #f0f0f0;
-moz-box-shadow:-2px 0px 10px #000 inset;
-webkit-box-shadow:-2px 0px 10px #000 inset;
box-shadow:-2px 0px 10px #000 inset;
}
#thumbScroller{
position:relative;
height:600px;
overflow:hidden;
left:-180px;
}
#thumbScroller .container{
position:relative;
top:0;
float:left;
}
#thumbScroller .content{
clear:both;
float:left;
}
#thumbScroller .content div{
padding:2px;
height:100%;
float:left;
}
#thumbScroller .content a{
outline:none;
}
#thumbScroller img{
border:5px solid #000;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}

Все элементы в контентной области будут позиционированы абсолютно:

img.pg_thumb,
  img#pg_large,
  .pg_title h1,
  .pg_content .pg_description div
  {
position:absolute;
}  

Слои с описаниями изначально будут невидимыми:

.pg_content .pg_description div{
display:none;
}

Главный заголовок будет иметь фоновое изображение, как и главный контейнер для миниатюр. Позиция будет выставлена на такие значения, чтобы элементы были невидимыми, а именно top = - 50px.

.pg_title h1{
display:none;
left:250px;
top:-50px;/*25*/
background:transparent url(../bg.png) repeat top left;
padding:10px 20px;
color:#fff;
font-weight:bold;
}

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

Миниатюра также должна быть спрятана:

img.pg_thumb{
display:none;
}

Большой просмотр изображения будет создан при нажатии на портфолио в обасти с контентом. У него будет более высокий z-index:

img#pg_large{
z-index:9999;
}

Стиль миниатюр в контентной области и стиль для большого предпросмотра будут такими:

img.pg_thumb,
  img#pg_large{
top:90px;
left:250px;
padding:10px;
background:transparent url(../bg.png) repeat top left;
cursor:pointer;
}

Описание и их заголовки используют следующие стили:

.pg_description h2{
color:#000;
font-size:22px;
margin-bottom:10px;
background:transparent url(../bg2.png) repeat top left;
padding:5px;
}
.pg_description p{
font-size:14px;
width:500px;
padding:10px;
overflow:hidden;
text-shadow:0px 0px 1px #fff;
background:transparent url(../bg.png) repeat top left;
color:#fff;
}

и, в конце, нам необходимо определить позиции слоев с описаниями::

#pg_desc1 div{
top:420px;
left:205px;
}
#pg_desc2 div{
top:560px;
left:295px;
}

Со стилями покончено. Давайте посмотрим теперь на магию JS.

JavaScript


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

//текущий элемент
  var current				= 0;
  //скорости / тип анимации
  var fadeSpeed			= 400;
  var animSpeed			= 600;
  var easeType			= 'easeOutCirc';
  //кеширование
  var $thumbScroller		= $('#thumbScroller');
  var $scrollerContainer	= $thumbScroller.find('.container');
  var $scrollerContent	= $thumbScroller.find('.content');
  var $pg_title 			= $('#pg_title');
  var $pg_preview 		= $('#pg_preview');
  var $pg_desc1 			= $('#pg_desc1');
  var $pg_desc2 			= $('#pg_desc2');
  var $overlay			= $('#overlay');
  //кол-во элементов
  var scrollerContentCnt  = $scrollerContent.length;
  var sliderHeight		= $(window).height();
  //мы будем сохранять общую высоту
  //контейнера со скроллом в этой переменной
  var totalContent		= 0;
  //высота единичного элемента
var itemHeight			= 0;

Теперь мы создадим область со скроллом миниатюр справа (после загрузки всех миниатюр):

var cnt		= 0;
  $thumbScroller.find('img').each(function(){
var $img 	= $(this);
$('').load(function(){
++cnt;
if(cnt == scrollerContentCnt){
/высота единичного элемента
itemHeight = $thumbScroller.find('.content:first').height();
buildScrollableItems();
//показать контейнер со скроллом
$thumbScroller.stop().animate({
'left':'0px'
},animSpeed);
}
}).attr('src',$img.attr('src'));
});

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

$scrollerContent.bind('click',function(e){
var $this 				= $(this);
 var idx 				= $this.index();
  //при клике на миниатюр отобразить
  if(current==idx) return;
 //если текущее изображение увеличено,
  //убираем его, но перед этим
  //анимируем его также, как бы мы это делали с миниатюрой
  var $pg_large			= $('#pg_large');
  if($pg_large.length > 0){
  $pg_large.animate({
  'left':'350px',
  'opacity':'0'
  },animSpeed,function(){
  $pg_large.remove();
  });
  }
 //получить текущие и нажатые до этого элементы
  var $currentTitle 		= $pg_title.find('h1:nth-child('+(current+1)+')');
  var $nextTitle 			= $pg_title.find('h1:nth-child('+(idx+1)+')');
  var $currentThumb		= $pg_preview.find('img.pg_thumb:eq('+current+')');
  var $nextThumb			= $pg_preview.find('img.pg_thumb:eq('+idx+')');
  var $currentDesc1 		= $pg_desc1.find('div:nth-child('+(current+1)+')');
  var $nextDesc1 			= $pg_desc1.find('div:nth-child('+(idx+1)+')');
  var $currentDesc2 		= $pg_desc2.find('div:nth-child('+(current+1)+')');
  var $nextDesc2 			= $pg_desc2.find('div:nth-child('+(idx+1)+')');
 //
  current		 			= idx;
 //анимировать вверх текущее название,
  //спрятать его, и анимировать следующее
  $currentTitle.stop().animate({
  'top':'-50px'
  },animSpeed,function(){
  $(this).hide();
  $nextTitle.show().stop().animate({
  'top':'25px'
  },animSpeed);
  });
 //показать следующее изображение,
  //анимировать текущее влево и расстворить его
  //чтобы отобразилось следующее
  $nextThumb.show();
  $currentThumb.stop().animate({
  'left': '350px',
  'opacity':'0'
  },animSpeed,function(){
  $(this).hide().css({
  'left'		: '250px',
  'opacity'	: 1,
  'z-index'	: 1
  });
  $nextThumb.css({
  'z-index':9999
  });
  });
 //анимировать оба текущих заголовка
  //и показать следующие
  $currentDesc1.stop().animate({
  'left':'205px',
  'opacity':'0'
  },animSpeed,function(){
  $(this).hide();
  $nextDesc1.show().stop().animate({
  'left':'250px',
  'opacity':'1'
  },animSpeed);
  });
  $currentDesc2.stop().animate({
  'left':'295px',
  'opacity':'0'
  },animSpeed,function(){
  $(this).hide();
  $nextDesc2.show().stop().animate({
  'left':'250px',
  'opacity':'1'
  },animSpeed);
  });
  e.preventDefault();
});

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

$pg_preview.find('.pg_thumb').bind('click',showLargeImage);
//увеличивает миниатюру
  function showLargeImage(){
  /если уже есть большое фото - убрать его
  $('#pg_large').remove();
  var $thumb 		= $(this);
  $thumb.unbind('click');
  var large_src 	= $thumb.attr('alt');
 $overlay.fadeIn(200);
  //анимировать ширину до 600px,высоту - 500px
  $thumb.stop().animate({
  'width'	: '600px',
  'height': '500px'
  },500,function(){
  $('').load(function(){
  var $largeImg = $(this);
  $largeImg.insertAfter($thumb).show();
  $thumb.hide().css({
  'left'		: '250px',
  'opacity'	: 1,
  'z-index'	: 1,
  'width'		: '360px',
  'height'	: '300px'
  });
  //при нажатии на большое фото
  //выполнить обратную анимацию
  $largeImg.bind('click',function(){
  $thumb.show();
  $overlay.fadeOut(200);
  $(this).stop().animate({
  'width'	: '360px',
  'height': '300px'
  },500,function(){
  $(this).remove();
  $thumb.css({'z-index'	: 9999});
  //привязываем событие при клике
  $thumb.bind('click',showLargeImage);
  });
 });
  }).attr('src',large_src);
  });
}

При изменение размеров окна браузера, высота скроллера должна быть подстроена под новое значение:

$(window).resize(function() { var w_h = $(window).height(); $thumbScroller.css('height',w_h); sliderHeight = w_h; });

И наконец, функция для создания контейнера для скроллера:

function buildScrollableItems(){
totalContent = (scrollerContentCnt-1)*itemHeight;
$thumbScroller.css('height',sliderHeight)
.mousemove(function(e){
if($scrollerContainer.height()>sliderHeight){
var mouseCoords		= (e.pageY - this.offsetTop);
var mousePercentY	= mouseCoords/sliderHeight;
var destY			= -(((totalContent-(sliderHeight-itemHeight))-sliderHeight)*(mousePercentY));
var thePosA			= mouseCoords-destY;
var thePosB			= destY-mouseCoords;
if(mouseCoords==destY)
$scrollerContainer.stop();
else if(mouseCoords>destY)
$scrollerContainer.stop()
.animate({
top: -thePosA
},
animSpeed,
easeType);
else if(mouseCoords

Вот и все! Если хотите придать нашему творению немного уникальности с помощью вставки разных шрифтов (с помощью cufon) добавьте следующие строки в шапку документа:



 

Надеюсь Вам понравился наш сегодняшний урок! Удачи! До скорых встреч!

Источник урока: www.tympanus.net

Урок Создан:2011-02-09 Просмотров:2166

Добавить комментарий:


Copyright© 2009 Hosted by Zhost