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

методы jquery

От автора: Сегодня мы создадим jQuery скрипт предпросмотра новостей, позволяющий компактно показывать наши самые последние статьи или записи на сайте. Слайдер предпросмотра новостей на jQuery, будет демонстрировать определённый список статей слева и анонс данной статьи с более длинным описанием справа. Как только на новость слева щелкнут, сразу выскользнет анонс.

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

Также скачайте исходники себе на компьютер!

Давайте начнем с разметки.

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

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

В списке слева у нас будут соответствующие пункты кратких описаний. В конце этого контейнера мы также добавим навигацию для пошагового движения по страницам:

<div class="cn_wrapper">
	<div id="cn_preview" class="cn_preview">
		<div class="cn_content" style="top:5px;">
			<img src="images/polaroidphotobar.jpg" alt=""/>
			<h1>Polaroid Photobar Gallery with jQuery</h1>
			<span class="cn_date">28/09/2010</span>
			<span class="cn_category">Tutorials</span>
			<p>In this tutorial we are going to create an...</p>
			<a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="cn_more">Read more</a>
		</div>
		<div class="cn_content">
			<img src="images/fullpageimagegallery.jpg" alt=""/>
			<h1>Full Page Image Gallery with jQuery</h1>
			<span class="cn_date">08/09/2010</span>
			<span class="cn_category">Tutorials</span>
			<p>In this tutorial we are going to create a stunning...
				</p>
			<a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/" target="_blank" class="cn_more">Read more</a>
		</div>
		...
	</div>
	<div id="cn_list" class="cn_list">
		<div class="cn_page" style="display:block;">
			<div class="cn_item selected">
				<h2>Polaroid Photobar Gallery with jQuery</h2>
				<p>Tutorial on how to create a gallery in polaroid style</p>
			</div>
			<div class="cn_item">
				<h2>Full Page Image Gallery with jQuery</h2>
				<p>Another tutorial on how to make a full gallery</p>
			</div>
			...
		</div>
		<div class="cn_page">
			...
		</div>
		<div class="cn_page">
			...
		</div>
		<div class="cn_nav">
			<a id="cn_prev" class="cn_prev disabled"></a>
			<a id="cn_next" class="cn_next"></a>
		</div>
	</div>
</div>

Первый элемент содержимого контейнера анонса уже будет иметь стиль к моменту прокрутки, а именно отступ сверху 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:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Bebas_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon('.cn_wrapper h1,h2', {
		textShadow: '-1px 1px black'
	});
</script>

На этом мануал по созданию плагина слайдера новостей на jQuery окончен. Надеемся, что вам этот учебник понравился и оказался полезным!!

киберсант-вебмастер

Автор: Mary Lou

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (14)

  1. Елизавета

    Доброго времени суток! Очень интересная идея! И демо-версия выглядит замечательно. Но возник вопрос: Совместим ли скрипт с сайтом на вордпрессе?

    • Антон

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

      • Andrey Bernacki

        Подключить к своему сайту, даже если он на вордпресе можно. Делается это следующим образом:
        В корень сайта кладем папку js, css и файл jquery.easing.1.3.js из исходников.
        В части head сайта пишем следующее:

        <link rel=’stylesheet’ href=’css/style.css’ type=’text/css’ media=’screen’/>
        <script src=’js/cufon-yui.js’ type=’text/javascript’></script>
        <script src=’js/Bebas_400.font.js’ type=’text/javascript’></script>
        <script type=’text/javascript’>
        Cufon(‘.cn_wrapper h1,h2′, {
        textShadow: ‘-1px 1px black’
        });
        </script>
        <style type=’text/css’>
        span.reference a{
        text-shadow:1px 1px 1px #fff;
        color:#999;
        text-transform:uppercase;
        text-decoration:none;
        position:fixed;
        right:10px;
        top:10px;
        font-size:13px;
        font-weight:bold;
        }
        span.reference a:hover{
        color:#555;
        }
        h1.title{
        color:#777;
        font-size:30px;
        margin:10px;
        font-weight:normal;
        text-shadow:1px 1px 1px #fff;
        }
        </style>

        В том месте где нам нужно вставить сам предпросмоторщик новостей пишем весь html код относящийся к нему:

        <div class=’cn_wrapper’>
        <div id=’cn_preview’ class=’cn_preview’>
        <div class=’cn_content’ style=’top:5px;’>
        <img src=’images/polaroidphotobar.jpg’ alt=»/>
        <h1>Polaroid Photobar Gallery with jQuery</h1>
        <span class=’cn_date’>28/09/2010</span>
        <span class=’cn_category’>Tutorials</span>
        <p>In this tutorial we are going to create an image gallery with a Polaroid look.
        We will have albums that will expand to sets of slightly rotated thumbnails
        that pop out on hover.</p>
        <a href=’http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/’ target=’_blank’ class=’cn_more’>Read more</a>
        </div>
        <div class=’cn_content’>
        <img src=’images/fullpageimagegallery.jpg’ alt=»/>
        <h1>Full Page Image Gallery with jQuery</h1>
        <span class=’cn_date’>08/09/2010</span>
        <span class=’cn_category’>Tutorials</span>
        <p>In this tutorial we are going to create a stunning full page gallery with
        scrollable thumbnails and a scrollable full screen preview.
        </p>
        <a href=’http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/’ target=’_blank’ class=’cn_more’>Read more</a>
        </div>
        <div class=’cn_content’>
        <img src=’images/collapsingsitenavigation.jpg’ alt=»/>
        <h1>Collapsing Site Navigation with jQuery</h1>
        <span class=’cn_date’>06/09/2010</span>
        <span class=’cn_category’>Tutorials</span>
        <p>
        Today we will create a collapsing menu that contains vertical
        navigation bars and a slide out content area. When hovering
        over a menu item, an image slides down from the top and a
        submenu slides up from the bottom.
        </p>
        <a href=’http://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/’ target=’_blank’ class=’cn_more’>Read more</a>
        </div>
        <div class=’cn_content’>
        <img src=’images/thumbnailsnavigation.jpg’ alt=»/>
        <h1>Thumbnails Navigation Gallery with jQuery</h1>
        <span class=’cn_date’>29/07/2010</span>
        <span class=’cn_category’>Tutorials</span>
        <p>
        In this tutorial we are going to create an extraordinary
        gallery with scrollable thumbnails that slide out from a
        navigation. We are going to use jQuery and some CSS3
        properties for the style.
        </p>
        <a href=’http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/’ target=’_blank’ class=’cn_more’>Read more</a>
        </div>
        <div class=’cn_content’>
        <img src=’images/musicportfoliotemplate.jpg’ alt=»/>
        <h1>Music Portfolio Template</h1>
        <span class=’cn_date’>26/07/2010</span>
        <span class=’cn_category’>Development</span>
        <p>
        Today we want to share a music portfolio template with you.
        The idea is to create an artist portfolio with a discography
        line up and HTML5 audio player jPlayer.
        </p>
        <a href=’http://tympanus.net/codrops/2010/07/26/music-portfolio-template/’ target=’_blank’ class=’cn_more’>Read more</a>
        </div>
        <div class=’cn_content’>
        <img src=’images/relatedpostsslideouts.jpg’ alt=»/>
        <h1>Related Posts Slide Out Boxes</h1>
        <span class=’cn_date’>21/07/2010</span>
        <span class=’cn_category’>Tutorials</span>
        <p>
        The main idea is to show a fixed list at the right side
        of the screen with some thumbnails sticking out. When
        the user hovers over the items, they slide out.
        </p>
        <a href=’http://tympanus.net/codrops/2010/07/21/related-posts-slide-out-boxes/’ target=’_blank’ class=’cn_more’>Read more</a>
        </div>
        <div class=’cn_content’>
        <img src=’images/LatestTweetsTooltip.jpg’ alt=»/>
        <h1>Latest Tweets Tooltip with jQuery</h1>
        <span class=’cn_date’>20/07/2010</span>
        <span class=’cn_category’>Development</span>
        <p>
        If you have a news website, it might be interesting
        for you to allow your users to see the latests tweets
        about a topic. Here is a jQuery plugin for showing the
        latest tweets about a certain word or phrase.
        </p>
        <a href=’http://tympanus.net/codrops/2010/07/20/latest-tweets-tooltip/’ target=’_blank’ class=’cn_more’>Read more</a>
        </div>
        <div class=’cn_content’>
        <img src=’images/slidedownbox.jpg’ alt=»/>
        <h1>Slide Down Box Menu with jQuery and CSS3</h1>
        <span class=’cn_date’>16/07/2010</span>
        <span class=’cn_category’>Tutorials</span>
        <p>
        In this tutorial we will create a unique sliding box
        navigation. The idea is to make a box with the menu
        item slide out, while a thumbnail pops up.
        </p>
        <a href=’http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/’ target=’_blank’ class=’cn_more’>Read more</a>
        </div>
        <div class=’cn_content’>
        <img src=’images/MinimalisticSlideshowGallery.jpg’ alt=»/>
        <h1>Minimalistic Slideshow Gallery with jQuery</h1>
        <span class=’cn_date’>05/07/2010</span>
        <span class=’cn_category’>Tutorials</span>
        <p>
        In today’s tutorial we will create a simple and
        beautiful slideshow gallery that can be easily
        integrated in your web site.
        </p>
        <a href=’http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/’ target=’_blank’ class=’cn_more’>Read more</a>
        </div>
        <div class=’cn_content’>
        <img src=’images/imagehighlight.jpg’ alt=»/>
        <h1>Image Highlighting and Preview with jQuery</h1>
        <span class=’cn_date’>04/07/2010</span>
        <span class=’cn_category’>Tutorials</span>
        <p>
        In this tutorial we will show you how to highlight
        and preview images that are integrated in an
        article or spread over a page.
        </p>
        <a href=’http://tympanus.net/codrops/2010/07/04/image-highlighting-preview/’ target=’_blank’ class=’cn_more’>Read more</a>
        </div>
        <div class=’cn_content’>
        <img src=’images/photodesk.jpg’ alt=»/>
        <h1>Interactive Photo Desk</h1>
        <span class=’cn_date’>01/07/2010</span>
        <span class=’cn_category’>Development</span>
        <p>
        In this little experiment we created an interactive photo
        desk that provides some “realistic” interaction possibilities
        for the user.
        </p>
        <a href=’http://tympanus.net/codrops/2010/07/01/interactive-photo-desk/’ target=’_blank’ class=’cn_more’>Read more</a>
        </div>
        </div>
        <div id=’cn_list’ class=’cn_list’>
        <div class=’cn_page’ style=’display:block;’>
        <div class=’cn_item selected’>
        <h2>Polaroid Photobar Gallery with jQuery</h2>
        <p>Tutorial on how to create a gallery in polaroid style</p>
        </div>
        <div class=’cn_item’>
        <h2>Full Page Image Gallery with jQuery</h2>
        <p>Another tutorial on how to make a full page image gallery with some jQuery</p>
        </div>
        <div class=’cn_item’>
        <h2>Collapsing Site Navigation with jQuery</h2>
        <p>This tutorial shows how to create a stylish sliding site navigation</p>
        </div>
        <div class=’cn_item’>
        <h2>Thumbnails Navigation Gallery</h2>
        <p>This gallery will show images in a scrollable menu navigation</p>
        </div>
        </div>
        <div class=’cn_page’>
        <div class=’cn_item’>
        <h2>Music Portfolio Template</h2>
        <p>A template for a music portfolio website with an HTML5 audio player</p>
        </div>
        <div class=’cn_item’>
        <h2>Related Posts Slide Out Boxes</h2>
        <p>Show users more of your articles with these slide out boxes</p>
        </div>
        <div class=’cn_item’>
        <h2>Latest Tweets Tooltip with jQuery</h2>
        <p>A Plugin for showing the latest tweets with a certain word in your article</p>
        </div>
        <div class=’cn_item’>
        <h2>Slide Down Box Menu with jQuery and CSS3</h2>
        <p>A menu with a nice effect</p>
        </div>
        </div>
        <div class=’cn_page’>
        <div class=’cn_item’>
        <h2>Minimalistic Slideshow Gallery</h2>
        <p>A compact image gallery for your website</p>
        </div>
        <div class=’cn_item’>
        <h2>Image Highlighting and Preview</h2>
        <p>Highlight and preview images that are integrated in an article</p>
        </div>
        <div class=’cn_item’>
        <h2>Interactive Photo Desk</h2>
        <p>Creating a photo desk with some real world interaction</p>
        </div>
        </div>
        <div class=’cn_nav’>
        <a id=’cn_prev’ class=’cn_prev disabled’></a>
        <a id=’cn_next’ class=’cn_next’></a>
        </div>
        </div>
        </div>
        <div>
        <span class=’reference’>
        <a href=’http://tympanus.net/codrops/2010/10/03/compact-news-previewer/’>back to the Codrops tutorial</a>
        </span>
        </div>

        и в самом конце страницы (перед закрывающимся body) вставляем такой код:

        <script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’></script>
        <script type=’text/javascript’ src=’jquery.easing.1.3.js’></script>
        <script type=’text/javascript’>
        $(function() {
        //caching
        //next and prev buttons
        var $cn_next = $(‘#cn_next’);
        var $cn_prev = $(‘#cn_prev’);
        //wrapper of the left items
        var $cn_list = $(‘#cn_list’);
        var $pages = $cn_list.find(‘.cn_page’);
        //how many pages
        var cnt_pages = $pages.length;
        //the default page is the first one
        var page = 1;
        //list of news (left items)
        var $items = $cn_list.find(‘.cn_item’);
        //the current item being viewed (right side)
        var $cn_preview = $(‘#cn_preview’);
        //index of the item being viewed.
        //the default is the first one
        var current = 1;

        /*
        for each item we store its index relative to all the document.
        we bind a click event that slides up or down the current item
        and slides up or down the clicked one.
        Moving up or down will depend if the clicked item is after or
        before the current one
        */
        $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;
        });
        });

        /*
        shows next page if exists:
        the next page fades in
        also checks if the button should get disabled
        */
        $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();
        });
        /*
        shows previous page if exists:
        the previous page fades in
        also checks if the button should get disabled
        */
        $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();
        });

        });
        </script>
        Вот пожалуй и все.

  2. Daniel

    Спасибо за урок. Но… Честно говоря я ничего не понял. Куда класть скрипты, как подключить этот слайдер на сайте, куда CSS, что за модули, и.т.д. Вы бы расписали еще и процесс подключения его к сайту, было-бы здорово. А так, например для меня урок бесполезен, т.к. я не знаю что с этим скриптом потом делать. (
    А он нужен. Хотел поставить его на сайт , на движке DLE.

  3. Андрей

    Так все сложно. Буду по тиху разбераться. Но на первый взгляд уже нравится.

  4. egor

    да скрипт красивый, но ваще не понятно куда его вставлять…

  5. Pocherk

    Прикольно, но отпугивает использование CSS3. Будет актуально только через 0.5 -1 год, а пока jQuery+ старый-добрый CSS2

  6. Олег

    Нет ли увас ссылки на урок по созданию RSS ленты новостей. Как создать, как привязать к сайту,как другие пользователи могут подключить к себе уведомления о новостях?
    КАК создать RSS например в топ 100 Рамблера ?

  7. Павел

    Очень хорошая статья. Спасибо. Обязательно добавлю на сайт. Уже вставил заголовок «Новости». Дело за малым ;)

  8. Влад

    Доброго времени суток. Почему скрипт невоспринимает русский шрифт ?

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree