JQuery flipping - ефектът от обръщане на страници в jquery. JQuery flipping - ефект на обръщане на страница в jquery Шаблон за обръщане на страница

Ефектът на обръщане на страници най-често се създава с помощта на Flash анимация. В интернет този ефект набира популярност в онлайн списания и презентации. Това се дължи на прилагането на този ефект в електронни книги и мобилни устройства.

В тази статия ще използваме PHP и плъгина turns.js, за да реализираме ефект на обръщане на страници, използвайки чист CSS3 и jQuery. Ще вземем най-популярните снимки от Instagram.com и ще създадем красиво списание.

HTML

Първо, трябва да разберем основите на този пример. Ще използваме прост дизайн на страница, който комбинира HTML5 маркиране и PHP в един файл. Това ще улесни разбирането. Можете да видите резултата от изпълнението по-долу:

index.php

Тук се свързваме стил.css, в главата, и javascript файлове в долната част. След това свързваме още 3 js файла: jQuery библиотека, turn.js, script.js, в които ще инициализираме плъгина и ще получаваме събития от клавиатурата. PHP кодът, който ще напишем малко по-късно, ще бъде изпълнен в #magazine div блока. PHP ще генерира страници от нашия журнал, които ще са необходими за turn.js.

Като пример можете да разгледате първите три страници на списанието, генерирани с помощта на PHP:

1 // 32 2 // 32 3 // 32

Кодът, който видяхте, се намира изцяло в блока #magazine div. Това е единственото нещо, от което се нуждае turns.js. Не е необходимо да създавате специални класове или атрибути за дата за елементи, които ще бъдат интерпретирани в страници. С това сме готови да започнем да пишем PHP код!

PHP

PHP ще се свърже с API на Intagram, ще кешира резултатите и ще генерира маркирането, което видяхте по-горе.

Първата стъпка е да регистрирате сайт за разработка на Instagram. След което ще получите ключ client_id, който ще вмъкнем като стойност в променлива $instagramClientID, във файл индекс.php. Не се нуждаем от разширена API функционалност, просто ще поискаме най-популярните изображения. Това ще ни освободи от използването на допълнително OAuth удостоверяване, което само ще направи кода по-труден за разбиране.

По-долу е даден примерен JSON отговор на текущи популярни изображения от Instagram. Скрих някои атрибути, за да направя кода по-ясен.

( "meta": ( "code": 200), "data": [( "tags": ["beautiful", "sky"], "location": "null", "comments": ( "count": 31, "данни": [...]), "филтър": "Нормално", "created_time": "1331910134", "връзка": "http:\/\/instagr.am\/p\/IPNNknqs84\ /", "харесвания": ( "брой": 391, "данни": [..]), "изображения": ( "ниска_резолюция": ( "url": "http:\/\/distilleryimage8.instagram.com \/03c80dd86f7911e1a87612313804ec91_6.jpg", "width": 306, "height": 306), "thumbnail": ( "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec 9 1_5.jpg", " ширина ": 150, "височина": 150), "стандартна_резолюция": ( "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_7.jpg", "ширина": 612, "височина": 612 )), "caption": ( "created_time": "1331910148", "text": "Лека нощ.\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": "Предимно снимки от природата.\ue32b\ue32b\ue32b Надявам се, че ви харесват.\ ue056 \ue32a \ue334gi\ue334 ", "profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "пълно_име": "jent99", "id": "6227738" ) ), ( /* Още снимки идват тук... */ )] )

API е ограничен до последните 32 изображения, но това е напълно достатъчно за нашия пример. Виждате, че всяка снимка има три размера, но ние ще използваме само един. Има и допълнителна информация за тагове, коментари и т.н.

PHP ще кешира резултатите от тази заявка за API. По този начин ще получаваме най-новите снимки на всеки час. Това ще направи нашето приложение по-бързо и ще ограничи броя на извикванията на API.

index.php

// Можете да получите идентификационния номер на клиента от страницата на API на Instagram $instagramClientID = "-- поставете вашия ключ за идентификационен номер на клиента тук --"; $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)( ?> " />