Создание Page Flip журнала
В этом уроке мы будем использовать PHP и плагин turn.js , для
осуществления на странице флип-эффекта с использованием CSS3 и Jquery. Мы будем
получать самые популярные изображения с Instagram каждый час, и использовать их как страницы.
ДЕМО
СКАЧАТЬ
ИСХОДНИК
HTML
Сначала мы должны заложить основы сегоднешнего примера. Мы
будем использовать единый дизайн страницы, которая сочетает в себе HTML5
разметку и PHP в одном файле для большей простоты. Вы можете увидеть, это
в формуляре ниже:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
/>
<title>Making an Instagram
Magazine | Tutorialzine Demo</title>
<!-- Our Stylesheet -->
<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 will go here -->
</div>
<!-- JavaScript includes - jQuery,
turn.js and our own 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>
PHP будет нам служить для генерации страницы нашего журнала,
который будет использовать turn.js. В качестве примера, вот разметка первых
трех страницах журнала:
Сгенерированный код
<div
id="page1" class="page">
<div class="img1">
<!-- The pageNum span can be either
on the left,
or the right if the page is
odd/even. -->
<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>
Вам не нужно иметь никаких специальных классов или данные
атрибута для элементов, которые будут интерпретироваться как страницы. С
этим кодом мы продолжим .
PHP
Первым шагом является регистрация на Instagram разработчиком сайта. После
получения вашегоclient_id ключ, поместим его в index.php в
качестве значения $ instagramClientID . Нам не понадобится любой
расширенной функциональности API, мы будем запрашивать только самые популярные изображения. Это
освобождает нас от необходимости реализации аутентификации OAuth, что позволит
сделать сегодняшний пример значительно сложнее.
Заметим, что если вы хотите изменить журнал и фотографии для
показа,своих последних фотографии, вы должны реализовать в аутентификации OAuth
ваше приложение, чтобы иметь доступ к вашим фотографиям.Обратитесь к
документации для получения дополнительной информации.
Вот пример ответа JSON популярных в настоящее время
изображений на Instagram. Я опустил некоторые атрибуты, чтобы сделать код
более удобным для чтения.
Популярные изображения JSON ответ
{ "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"
}
}, {
/* More photos here*/
}]
}
API ограничивается возвращением только 32 фото, но это много
для нашего примера. Вы можете видеть, что каждая фотография имеет три
размера, но мы будем использовать только стандартный.Существует также другая
информация, которую можно использовать как заголовок, размеры, марки,
комментарии и многое другое.
index.php
// You can
obtain this client ID from the Instagram API page
$instagramClientID
= '-- place your client id key here --';
$api =
'https://api.instagram.com/v1/media/popular?client_id='.$instagramClientID;
$cache =
'cache.txt';
if(file_exists($cache)
&& filemtime($cache) > time() - 60*60){
// If a cache file exists, and it is
// fresher than 1 hour, use it
$images =
unserialize(file_get_contents($cache));
}
else{
// Make an API request and create the cache
file
// Fetch the 32 most popular images on
Instagram
$response = file_get_contents($api);
$images = array();
// Decode the response and build an 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)
);
}
// Remove the last item, so we still have
// 32 items when when the cover is added
array_pop($images);
// Push the cover in the beginning of the
array
array_unshift($images,array("title"=>"Cover",
"src"=>"assets/img/cover.jpg"));
// Update the cache file
file_put_contents($cache,serialize($images));
}
# Generate
the markup
$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
">
// </span>
<img src="<?php echo
$image['src']?>" alt=""
/>
</div>
</div>
<?php
}
Кэширование простое: мы используем временный файл - cache.txt -
для хранения сериализованного представления матрицы изображения. Если
кэш-файл является несуществующей или старше, чем за час, мы выдаем новый запрос
API.
Обратите внимание на вызовы array_pop и array_unshift . Они
необходимы для того, чтобы освободить место для пользовательской обложки,
которая хранится в активах / IMG . Журнал работает
лучше, если у нас есть четное число страниц, в противном случае мы не смогли бы
перевернуть последнюю.
Теперь мы готовы для плагина!
JQuery
активы / JS / script.js
$(function(){
var mag = $('#magazine');
// initiazlie turn.js on the #magazine div
mag.turn();
// turn.js defines its own events. We are
listening
// for the turned event so we can center
the magazine
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(){
// Leave some time for the plugin to
// initialize, then show the magazine
mag.fadeTo(500,1);
},1000);
$(window).bind('keydown', function(e){
// listen for arrow keys
if (e.keyCode == 37){
mag.turn('previous');
}
else if (e.keyCode==39){
mag.turn('next');
}
});
});
CSS
Нам нужно установить явные размеры журнала и стиль страниц и
номера страниц. turn.js будет справляться с остальным.
активов / 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;
}
/* Center
the magazine when the cover is shown */
#magazine.centerStart{
left:-260px;
}
/* Center
the magazine when the last page is shown */
#magazine.centerEnd{
left:260px;
}
.page img{
height:520px;
width:520px;
display:block;
}
/* Show a
dark shadow when the cover is shown */
.centerStart
.turn-page-wrapper:first-child{
box-shadow:0 0 10px #040404;
}
/* Page
Numbers */
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;
}
/* Hide the
page number on the cover */
#page1 .pageNum{
display:none;
}
Мы сделали!
Этот пример работает во всех последних версиях браузеров -
Firefox, Chrome, Safari, Opera и даже IE. Используется даже на IOS и
Android. Вы можете использовать этот эффект как часть фотогалереи,
шаблонов или даже реальных журналов. Однако вам придется создать резервные
версии для старых браузеров, которые не могут отображать их правильно.
Мартин Ангелов
Ссылка на
источник
| 
