Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Свежий софт


Wrecker Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Wrecker Virtual DJ
Virtual DJ
Wrecker SoundForge 11
SoundForge 11
Wrecker Alcohol 120
Alcohol 120
Wrecker Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Рекомендуем



Главная » 2013 » Август » 6 » Создание Page Flip журнала

22:18
Создание Page Flip журнала

Создание 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. Вы можете использовать этот эффект как часть фотогалереи, шаблонов или даже реальных журналов. Однако вам придется создать резервные версии для старых браузеров, которые не могут отображать их правильно.

 Мартин Ангелов

Ссылка на источник

Категория: CSS//HTML//JS | Просмотров: 1291 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация

    • Читаемое

    Категории

    Заходи не жди

    Web Template created with Artisteer.