JQuery перегортання - ефект перегортання сторінок на jquery
У цій статті ми будемо використовувати PHP та плагін turns.js, які дозволять реалізувати ефект перегортання сторінки на чистому CSS3 та jQuery. Ми візьмемо найпопулярніші картинки з Instagram.com та створимо гарний журнал.
Насамперед нам потрібно зрозуміти основи цього прикладу. Ми будемо використовувати простий дизайн сторінки, який поєднує HTML5 розмітку та PHP в одному файлі. Так простіше буде розуміти. Ви можете бачити результат виконання нижче:
index.php
Тут ми підключаємо style.css, в head, і JavaScript файли внизу. Далі ми підключаємо ще 3 js файли: бібліотека jQuery, turn.js, script.js, в якому ми ініціалізуватимемо плагін і прийматимемо події клавіатури. PHP код, який ми напишемо трохи пізніше, буде виконуватися в #magazine div блоці. PHP буде генерувати сторінки нашого журналу, які будуть потрібні для turn.js.
Як приклад, ви можете переглянути три перші сторінки журналу, згенерованих за допомогою PHP:
Код, який ви бачили, повністю лежить в блоці #magazine div. Це єдине, що потрібне для turns.js. Вам не потрібно створювати якісь спеціальні класи чи дата атрибути для елементів, які будуть інтерпретовані у сторінки. На цьому ми готові розпочати написання PHP коду!
PHP з'єднуватиметься з Intagram API, кешуватиме результати, і генеруватиме розмітку, яку ви бачили вище.
Першим кроком буде реєстрація Instagram девелоперського сайту. Після чого ви отримаєтеclient_id ключ, який вставимо якзначення змінної $instagramClientID, у файлі index.php. Ми не потребуємо розширеної функціональності API, ми просто запросимо найбільш популярні картинки. Це звільнить нас від використання додаткової аутентифікації OAuth, яка тільки ускладнить розуміння коду.
Нижче наведено приклад JSON відповіді поточних популярних картинок від Instagram. Я приховав деякі атрибути, щоб зробити код зрозумілішим.
PHP кешуватиме результати цього API запиту. Таким чином, ми будемо отримувати останні картинки щогодини. Це зробить наш додаток швидшим та обмежить кількість звернень до API.
index.php
Кешування реалізовано просто: ми використовуємо тимчасовий файл – cache.txt – щоб зберегти репрезентацію масиву картинок. Якщо файл не існує або створений пізніше однієї години тому, ми створимо новий запит API.
Зверніть увагу на функції array_pop та array_unshift. Це необхідно для створення комірки для зображення обкладинки, яка зберігається в assets/img. Журнал працює краще, якщо ми маємо однакову кількість сторінок, інакше ми не зможемо перегортати останню сторінку. Це буде виглядати неприродно.
Тепер ми готові до написання плагіна перегортання сторінок!
Використання turns.js не можна просте. Якщо ми маємо готову розмітку журналу, нам потрібно лише викликати turn() метод. Також ми сприйматимемо події натискання стрілок на клавіатурі, які запускатимуть перегортання сторінки.
assets/js/script.js
Нам потрібно уточнити розміри журналу, стиль сторінок та номерів. turns.js зробить все інше.
assets/css/styles.css
На цьому наш журнал з ефектом jquery перегортання сторінок готовий!
Ми зробили!
Цей приклад працює в останніх версіяхбраузерів – Firefox, Chrome, Safari, Opera та навіть IE. Цей ефект перегортання також працює на iOS та Android. Цей ефект можна використовувати як частину фотогалереї як шаблон для онлайнових журналів. Хоча вам доведеться створити іншу версію для старих браузерів, які не підтримують це.