Скрипт jQuery: слайдер перегляду новин

11

Від автора: Сьогодні ми створимо jQuery скрипт перегляду новин, що дозволяє компактно показувати наші самі останні статті чи запису на сайті. Слайдер перегляду новин на jQuery, буде демонструвати певний список статей зліва і анонс даної статті з більш довгим описом праворуч. Як тільки на новину зліва клацнуть, відразу вислизне анонс.

Перед тим, як ми приступимо до створення слайдера новин на jQuery, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

Давайте почнемо з розмітки.

Розмітка слайдера анонсів новин, на jQuery

У нас буде основний контейнер «cn_wrapper», що містить правий елемент з класом «cn_preview» і лівий – з класом «cn_list». Div анонсу буде укладати елементи контенту. Кожен з них містить зображення анонсу, назву та опис поряд з кількома фрагментами і посиланням на саму статтю.

У списку ліворуч у нас будуть відповідні пункти коротких описів. В кінці цього контейнера ми також додамо навігацію для покрокового руху по сторінках:

Скрипт jQuery: слайдер перегляду новин

Polaroid Photobar Gallery with jQuery

28/09/2010
Tutorials

In this tutorial we are going to create an…

Read more

Скрипт jQuery: слайдер перегляду новин

Full Page Image Gallery with jQuery

08/09/2010
Tutorials

In this tutorial we are going to create a stunning…

Read more

Polaroid Photobar Gallery with jQuery

Tutorial on how to create a gallery in style polaroid

Full Page Image Gallery with jQuery

Another tutorial on how to make a full gallery

Перший елемент вмісту контейнера анонсу вже буде мати стиль до моменту прокрутки, а саме відступ зверху 5 px. Всі інші анонси приховані «hidden», тому що у них буде відступ зверху на 310 px.

Список елементів буде розділений на сторінки, кожна з яких містить саме більше 5 пунктів.

Давайте подивимося на стиль.

CSS

Для створення декількох образотворчих ефектів ми використовуємо безліч властивостей CSS3. Ми застосуємо тіні, закруглені краї і градієнти як з RGB, так і з шістнадцятковими значеннями.

Давайте почнемо з основного контейнера. Ми встановимо його відносно, щоб потім можна було всередині нього використовувати абсолютне позиціонування:

.cn_wrapper{
margin:90px auto 0px auto;
width:500px;
height:300px;
position:relative;
color:#fff;
overflow:hidden;
padding:5px;
text-shadow:1px 1px 1px #000;
border:1px solid #111;
background-color:#333;
-moz-box-shadow:1px 1px 4px #222;
-webkit-box-shadow:1px 1px 4px #222;
box-shadow:1px 1px 4px #222;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

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

.cn_wrapper h1{
font-size:20px;
text-transform:uppercase;
}
.cn_wrapper h2{
font-size:12px;
border-bottom:1px solid #000;
padding-bottom:4px;
text-transform:uppercase;
}

У списку програми перегляду використовується h2, і ми передаємо йому нижню межу для створення під ним красивою «вигравіруваним» лінії. Це спрацює, тому що ми передамо p, наступного за ним, верхню межу більш світлого кольору.

І анонс, і список будуть позиціонуватися абсолютно, так що ми спочатку визначимо загальний стиль, а потім будемо заміняти атрибут left для кожного анонсу:

.cn_preview, .cn_list{
width:250px;
height:300px;
position:absolute;
top:2px;
left:6px;
}
.cn_preview{
left:255px;
}

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

.cn_content{
border:1px solid #444;
top:310px;/*5*/
left:5px;
width:219px;
padding:10px;
position:absolute;
background-color:#101010;
height:275px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

Ці елементи будуть анімовані за допомогою JavaScript. Спочатку нам потрібно їх приховати, так що визначаємо відступ зверху (top) більше обертывающего (основного) div-a. Ось чому ми встановлюємо overflow обертывающего (основного) div-a як прихований (hidden) так, щоб не бачити нічого, що виходить за його межі.

Тепер призначимо стилі елементів всередині div а content.
Зображення в нашому випадку завжди буде максимальної ширини 215 px. Зверніть увагу, що якщо у вас зображення іншого розміру, вам доведеться під нього підігнати всі елементи. В цьому випадку висота зображення буде 119 px. Це значення, на якому ми будемо базувати висоту наступних елементів.

.cn_content img{
width:215px;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}

Дата і категорія будуть позиціонуватися абсолютно внизу div а content:

.cn_date{
position:absolute;
bottom:30px;
right:8px;
font-size:11px;
}
.cn_category{
position:absolute;
bottom:30px;
left:8px;
font-size:11px;
padding:1px 3px;
background:#ccc;
border:1px solid #ddd;
color:#000;
text-shadow:-1px 0px 1px #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

Опис, що є елементом p, буде мати фіксовану висоту, а якщо воно більше, то буде обрізано:

.cn_content p{
height:57px;
margin-top:2px;
overflow:hidden;
}

Кнопка more (далі), яка буде посиланням на вихідну статтю, буде забезпечена градієнтом, тінню і закругленими краями внизу ліворуч і праворуч, щоб підходити до вмісту:

a.cn_more{
position:absolute;
padding: 4px 0px;
left:0px;
bottom:0px;
width:236px;
color:#fff;
text-align:center;
font-size:12px;
letter-spacing:1px;
text-shadow:1px 1px 1px #011c44;
text-transform:uppercase;
text-decoration: none;
border:1px solid #4c7ecb;
outline:none;
cursor:pointer;
background-color: #1951A5;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-border-bottom-left-radius: 5px;
-border-bottom-right-radius: 5px;
-moz-box-shadow:1px 1px 3px #111;
-webkit-box-shadow:1px 1px 3px #111;
box-shadow:1px 1px 3px #111;
}

Зміна кольору шрифту при проведенні мишею створить гарний об’ємний ефект:

a.cn_more:hover{
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}

Тепер ми визначимо стилі пунктів списку. У них в якості тла градієнт, який змінюється при проведенні над ним мишею (hover). До вибраного пункту ми також застосуємо ефект hover.

.cn_item{
border:1px solid #090909;
cursor:pointer;
position:relative;
overflow:hidden;
height:49px;
color:#fff;
padding:5px;
margin:6px 5px 0px 0px;
text-shadow:1px 1px 1px #000;
background:#2b2b2b;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#171717),
to(#2b2b2b)
);
background:
-moz-linear-gradient(
top,
#171717,
#2b2b2b
);
-moz-box-shadow:1px 1px 3px #111;
-webkit-box-shadow:1px 1px 3px #111;
box-shadow:1px 1px 3px #111;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.cn_item:hover, .selected{
border-color:#4c7ecb;
background-color: #1951A5;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
}

«Край» лінія під заголовком, крім того, буде змінювати колір:

.cn_item:hover h2,
.cn_list .selected h2,
.cn_item:active h2{
border-color:#2C5FAC;
}
.cn_item:hover p,
.cn_list .selected p,
.cn_item:active p{
border-color:#527CBB;
}

Псевдоклас active, наприклад, при натисканні на пункт списку отримає ефект вигравірованого тексту за допомогою наступного стилю:

.cn_item:active {
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}

Короткий опис у пункті списку буде мати фіксовану висоту і верхню межу, які в поєднанні з нижньою межею h2 створять лінію, яка виглядає як гравірована:

.cn_list p{
height:29px;
padding-top:2px;
overflow:hidden;
border-top:1px solid #333;
}

Тепер давайте надамо стилі навігації. Ми встановимо її абсолютно внизу свого контейнера списку:

.cn_nav{
width:55px;
height:24px;
position:absolute;
bottom:0px;
left:94px;
}

У наступного і попереднього елементів буде наступний загальний стиль:

a.cn_next, a.cn_prev{
float:left;
height:23px;
width:23px;
background-color:#212121;
background-repeat:no-repeat;
background-position:center center;
cursor:pointer;
outline:none;
border:1px solid #111;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

Тепер ми тільки встановимо індивідуальні стилі, які є фоновими зображеннями:

a.cn_next{
background-image:url(../images/next.png);
}
a.cn_prev{
margin-right:5px;
background-image:url(../images/prev.png);
}

При проведенні мишею ми просто змінюємо колір фону:

.cn_nav a:hover{
background-color:#101010;
}

При клацанні по пункту переходів ми зрушуємо його вниз на 1 px, таким чином він виглядає натиснутим. Це можна зробити, встановивши верхнє поле на 1px:

.cn_nav a:active{
margin-top:1px;
background-color:#000;
}

У неактивного елемента навігації непрозорість буде 0.5:

.cn_nav a.disabled{
opacity:0.5;
}

Останнє, що нам потрібно визначити – щоб сторінки списку не було видно. Потім ми зробимо їх видимими у JavaScript:

.cn_page{
display:none;
}

Ось і весь стиль. Тепер давайте з допомогою jQuery додамо ефекти!

JavaScript

Для створення ефектів ми використовуємо easing, так що не забудьте включити jQuery плагін easing.

В jQuery ми почнемо з визначення кількох змінних:

//caching
//кнопки «вперед» і «назад»
var $cn_next = $(‘#cn_next’);
var $cn_prev = $(‘#cn_prev’);
//обгортка для лівих пунктів
var $cn_list = $(‘#cn_list’);
var $pages = $cn_list.find(‘.cn_page’);
//кількість сторінок
var cnt_pages = $pages.length;
//за замовчуванням номер сторінки = 1
var page = 1;
//списку новин (ліві пункти)
var $items = $cn_list.find(‘.cn_item’);
//поточний пункт переглядаємо праворуч
var $cn_preview = $(‘#cn_preview’);
//номер елемента в перегляді.
//перший пункт умочанию
var current = 1;

Для кожного елемента зберігаємо його індекс щодо всього документа. Прив’язуємо подію клацання (click), яке змушує поточний або нажатый елемент ковзати вгору або вниз. В залежності від поточного елемента (слід він до або після останнього нажатого), нажатый буде зміщуватися вгору або вниз:

$items.each(function(i){
var $item = $(this);
$item.data(‘idx’,i+1);
$item.bind(‘click’,function(){
var $this = $(this);
$cn_list.find(‘.selected’).removeClass(‘selected’);
$this.addClass(‘selected’);
var idx = $(this).data(‘idx’);
var $current = $cn_preview.find(‘.cn_content:nth-child(‘+current+’)’);
var $next = $cn_preview.find(‘.cn_content:nth-child(‘+idx+’)’);
if(idx > current){
$current.stop()
.animate({
‘top’:’-300px’
},600,’easeOutBack’,function(){
$(this).css({‘top’:’310px’});
});
$next.css({
‘top’:’310px’
}).stop()
.animate({
‘top’:’5px’
},600,’easeOutBack’);
}
else if(idx < current){
$current.stop()
.animate({
‘top’:’310px’
},600,’easeOutBack’,function(){
$(this).css({‘top’:’310px’});
});
$next.css({
‘top’:’-300px’
}).stop()
.animate({
‘top’:’5px’
},600,’easeOutBack’);
}
current = idx;
});
});

Тепер визначимо, що відбувається, коли в навігації клацають на next (наступний). Наступна сторінка повинна поступово проявитися, якщо вона існує, або ж потрібно вимкнути кнопку, якщо наступної сторінки не існує:

$cn_next.bind(‘click’,function(e){
var $this = $(this);
$cn_prev.removeClass(‘disabled’);
++page;
if(page == cnt_pages)
$this.addClass(‘disabled’);
if(page > cnt_pages){
page = cnt_pages;
return;
}
$pages.hide();
$cn_list.find(‘.cn_page:nth-child(‘+page+’)’).fadeIn();
e.preventDefault();
});

І те ж саме для попередньої сторінки:

$cn_prev.bind(‘click’,function(e){
var $this = $(this);
$cn_next.removeClass(‘disabled’);
—page;
if(page == 1)
$this.addClass(‘disabled’);
if(page < 1){
page = 1;
return;
}
$pages.hide();
$cn_list.find(‘.cn_page:nth-child(‘+page+’)’).fadeIn();
e.preventDefault();
});

Щоб все виглядало ще краще, ми додаємо в заголовок HTML наступні рядки, використовуючи модуль cufon-yui.js:

Cufon(‘.cn_wrapper h1,h2’, {
textShadow: ‘-1px 1px black’
});

На цьому мануал по створенню плагіна слайдера новин на jQuery закінчено. Сподіваємося, що вам сподобався цей підручник і виявився корисним!!

Скрипт jQuery: слайдер перегляду новин

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.