- → Программирование
- → JavaScript
- → Статьи
jQuery перелистывание - эффект перелистывания страниц на jquery
Эффект перелистывания страницы, наиболее часто создается с помощью Flash анимации. В интернете этот эффект набирает популярности в онлайн журналах и презентациях. Это связано с реализацией этого эффекта в ebook и мобильных устройствах.
В этой статье мы будем использовать PHP и плагин turns.js, которые позволят реализовать эффект перелистывания страницы на чистом CSS3 и jQuery. Мы возьмем наиболее популярные картинки из Instagram.com и создадим красивый журнал.
Ссылку на ДЕМО смотрите в комментариях, в конце статьи. Также скачайте архив скрипта, и протестируйте на своем компютере.
HTML
Прежде всего нам нужно понять основы этого примера. Мы будем использовать простой дизайн странички, который совмещает HTML5 разметку и PHP в одном файле. Так будет проще понимать. Вы можете видеть результат выполнения ниже:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery эффект перелистывания | Sitear.ru</title>
<!-- наши стили -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="magazine" class="centerStart">
<!-- PHP будет здесь -->
</div>
<!-- JavaScript подключения - jQuery, turn.js и наш написаный script.js -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/js/turn.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Здесь мы подключаем style.css, в head, и javascript файлы внизу. Далее мы подключаем еще 3 js файла: библиотека jQuery, turn.js, script.js, в котором мы будем инициализировать плагин и принимать события клавиатуры. PHP код, который мы напишем немножечко позже, будет выполнятся в #magazine div блоке. PHP будет генерировать странички нашего журнала, которые будут нужны для turn.js.
Как пример, вы можете посмотреть на три первых страницы журнала, сгенерированных с помощью PHP:
<div id="page1" class="page">
<div class="img1">
<!-- pageNum span может быть как правой так и левой страницей -->
<span class="pageNum right">1 // 32</span>
<img src="assets/img/cover.jpg" alt="Cover" />
</div>
</div>
<div id="page2" class="page">
<div class="img2">
<span class="pageNum left">2 // 32</span>
<img src="http://distilleryimage7.instagram.com/..." alt="Little tulips" />
</div>
</div>
<div id="page3" class="page">
<div class="img3">
<span class="pageNum right">3 // 32</span>
<img src="http://distilleryimage2.instagram.com/..." alt="My style" />
</div>
</div>
Код который вы видели, полностью лежит в блоке #magazine div. Это единственное, что нужно для turns.js. Вам не нужно создавать какие-то специальные классы или дата атрибуты для элементов, которые будут интерпретированы в странички. На этом мы готовы приступить к написанию PHP кода!
PHP
PHP будет соединяться с Intagram API, кешировать результаты, и генерировать разметку, которую вы видели выше.
Первым шагом будет регистрация Instagram девелоперского сайта. После чего вы получите client_id ключ, который вставим как значение в переменную $instagramClientID, в файле index.php. Мы не нуждаемся в расширенной функциональности API, мы просто запросим наиболее популярные картинки. Это освободит нас от использования дополнительной OAuth аутентификации, которая только утруднит понимание кода.
Ниже пример JSON ответа текущих популярных картинок от Instagram. Я скрыл некоторые атрибуты, чтобы сделать код более понятным.
{ "meta": {
"code": 200
},
"data": [{
"tags": ["beautiful", "sky"],
"location": "null",
"comments": {
"count": 31,
"data": [...]
},
"filter": "Normal",
"created_time": "1331910134",
"link": "http:\/\/instagr.am\/p\/IPNNknqs84\/",
"likes": {
"count": 391,
"data": [..]
},
"images": {
"low_resolution": {
"url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_6.jpg",
"width": 306,
"height": 306
},
"thumbnail": {
"url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_5.jpg",
"width": 150,
"height": 150
},
"standard_resolution": {
"url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_7.jpg",
"width": 612,
"height": 612
}
},
"caption": {
"created_time": "1331910148",
"text": "Goodnight.\ue056",
"from": {
"username": "jent99",
"profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg",
"id": "6227738",
"full_name": "jent99"
},
"id": "148395540733414783"
},
"type": "image",
"id": "148395420004568888_6227738",
"user": {
"username": "jent99",
"website": "",
"bio": "Mostly nature pics.\ue32b\ue32b\ue32b Hope you like them.\ue056\ue32a \ue334gi\ue334 ",
"profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg",
"full_name": "jent99",
"id": "6227738"
}
}, {
/* Здесь идет больше фотографий... */
}]
}
API ограничивается 32 последними картинками, но этого вполне достаточно для нашего примера. Вы можете видеть, что каждое фото имеет три размера, но мы будем использовать только один. Также здесь присутствует дополнительная информация о тегах, комментариях, и так далее.
PHP будет кешировать результаты этого API запроса. Таким образом, мы будем получать последние картинки каждый час. Это сделает наше приложение более быстрым и ограничит количество обращений к API.
index.php
// Вы можете получить client ID из Instagram API страницы
$instagramClientID = '-- вставьте свой client id ключ здесь --';
$api = 'https://api.instagram.com/v1/media/popular?client_id='.$instagramClientID;
$cache = 'cache.txt';
if(file_exists($cache) && filemtime($cache) > time() - 60*60){
// Если файл кэша существует и он
// свежее нежели 1 час, будем использовать его
$images = unserialize(file_get_contents($cache));
}
else{
// Создаем API запрос и генерируем файл кэша
// Получаем 32 популярные фотографии на Instagram
$response = file_get_contents($api);
$images = array();
// Декодируем ответ и создаем массив
foreach(json_decode($response)->data as $item){
$title = '';
if($item->caption){
$title = mb_substr($item->caption->text,0,70,"utf8");
}
$src = $item->images->standard_resolution->url;
$images[] = array(
"title" => htmlspecialchars($title),
"src" => htmlspecialchars($src)
);
}
// Удаляем последнюю картинку, но мы будем иметь
// 32 картинки, когда добавим обложку
array_pop($images);
// Добавляем обложку в начале массива
array_unshift($images,array("title"=>"Cover", "src"=>"assets/img/cover.jpg"));
// Обновляем файл кэша
file_put_contents($cache,serialize($images));
}
// создаем разметку
$totalPages = count($images);
foreach($images as $i=>$image){
?>
<div id="page<?php echo $i+1?>" class="page">
<div class="img<?php echo $i+1?>">
<span class="pageNum <?php echo ($i+1)%2? 'right' : 'left'?>"><?php echo $i+1?> // <?php echo $totalPages?></span>
<img src="<?php echo $image['src']?>" alt="<?php echo $image['title']?>" />
</div>
</div>
<?php
}
Кеширование реализовано просто: мы используем временный файл – cache.txt – чтобы сохранить репрезентацию массива картинок. Если файл не существует или создан позже одного часа назад, мы создадим новый API запрос.
Обратите внимание на функции array_pop и array_unshift. Это необходимо для создания ячейки для картинки обложки, которая хранится в assets/img. Журнал работает лучше, если мы имеем равное количество страниц, иначе мы не сможем перелистывать последнюю страничку. Это будет выглядеть не естественно.
Теперь мы готовы к написанию плагина перелистывания страниц!
jQuery
Использование turns.js до нельзя простое. Если мы имеем готовую разметку журнала, нам нужно всего лишь вызвать turn() метод. Также мы будем воспринимать события нажатия стрелок на клавиатуре, которые будут запускать перелистывания страницы.
assets/js/script.js
$(function(){
var mag = $('#magazine');
// Инициализируем turn.js для #magazine div
mag.turn();
// turn.js определяет собственные события. Мы воспринимаем
// события нажатия клавиш и центрируем
mag.bind('turned', function(e, page, pageObj) {
if(page == 1 && $(this).data('done')){
mag.addClass('centerStart').removeClass('centerEnd');
}
else if (page == 32 && $(this).data('done')){
mag.addClass('centerEnd').removeClass('centerStart');
}
else {
mag.removeClass('centerStart centerEnd');
}
});
setTimeout(function(){
// Оставим немножко время для инициализации плагина
// потом показываем журнал
mag.fadeTo(500,1);
},1000);
$(window).bind('keydown', function(e){
// Воспринимаем события нажатия клавиш
if (e.keyCode == 37){
mag.turn('previous');
}
else if (e.keyCode==39){
mag.turn('next');
}
});
});
Вот такой простой jquery плагин перелистывания страниц. В принципе все понятно из комментариев кода. Теперь сделаем наш журнал привлекательным!
CSS
Нам нужно уточнить размеры журнала, стиль страничек и номеров. turns.js сделает все остальное.
assets/css/styles.css
#magazine{
width:1040px;
height:520px;
margin:0 auto;
position:relative;
left:0;
opacity:0;
-moz-transition:0.3s left;
-webkit-transition:0.3s left;
transition:0.3s left;
}
#magazine .page{
width:520px;
height:520px;
background-color:#ccc;
overflow:hidden;
}
/* Центрируем журнал, когда показана обложка */
#magazine.centerStart{
left:-260px;
}
/* Центрируем журнал, когда показана последняя страница */
#magazine.centerEnd{
left:260px;
}
.page img{
height:520px;
width:520px;
display:block;
}
/* Показываем темную тень */
.centerStart .turn-page-wrapper:first-child{
box-shadow:0 0 10px #040404;
}
/* Номера страниц */
span.pageNum{
background-color: rgba(0, 0, 0, 0.3);
bottom: 25px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
color: #FFFFFF;
font-size: 11px;
height: 24px;
line-height: 22px;
opacity: 0.9;
position: absolute;
text-align: center;
width: 55px;
}
span.pageNum.left{
left:0;
right:auto;
}
span.pageNum.right{
left:auto;
right:0;
}
/* Скрываем номера страниц на обложке */
#page1 .pageNum{
display:none;
}
На этом наш журнал с эффектом jquery перелистывания страниц готов!
Мы сделали!
Этот пример работает в последних версиях браузеров – Firefox, Chrome, Safari, Opera и даже IE. Этот эффект перелистывания также работает на iOS и Android. Вы можете использовать этот эффект как часть фотогалерей, как шаблон для онлайновых журналов. Хотя вам придется создать другую версию для старых браузеров, которые не поддерживают этого.
На этом все! Если имеете вопросы по поводу jquery перелистывания, пишите в комментарии.
Источник материала ...
Дальше: Семантическая верстка: понятие и примеры семантического кода
Development — Taras Moroz