Створення повноекранної галереї
У цьому уроці ми створимо повноекранну галерею, використовуючи jQuery. Ідея полягає в тому, щоб відображати мініатюру поточного зображення окремому блоці з описом. Велике зображення рухатиметься вгору або вниз залежно від напрямку, який ми виберемо. Галерея також реагуватиме на колесо миші, клавіші вгору і вниз.
У розробці цієї галереї нам знадобиться jQuery плагін Flip!, від Lucca Manno для перевертання мініатюр.
Ми також будемо використовувати плагін jQuery Mousewheel Plugin від Brandon Aaron.
Ці чудові фото були зняті Поліною Єфремовою.
Почнемо з розмітки!
Перш за все, додамо елемент, який буде відображатися до того, як усі зображення не завантажаться:
Створимо контейнер із усіма зображеннями, які будуть відображені у галереї:
Ми будемо використовувати атрибут “longdesc”, щоб вказати шлях до мініатюри. Останній елемент div служитиме шаблоном.
Додамо контейнер, який зберігатиме контент, що з'являється у лівій нижній частині екрана.
Кожен блок із заголовком поміщаємо елемент із класом “tf_content”.
Структура для блоку, що містить мініатюри зображень (розташовується у правій частині), буде виглядати так:
Span буде мати клас "tf_zoom" або "tf_fullscreen" залежно від того, в якому режимі ми знаходимося.
І нарешті, додамо кілька елементів для навігації:
Погляньмо що у нас зі стилями.
Після того, як ми написали html, визначимо кілька стилів, які відповідатимуть за повноекранне відображення:
Контейнер розтягнеться по всьому екрану. Усі зображення позиціонуємо абсолютно. Ширина та висота, відповідно до розширень екрана користувача будутьобчислені автоматично за допомогою jQuery:
Заголовок панелі з контентом буде оформлено спеціальним тлом, який ми завантажимо через Google Font API. Це зробимо трохи згодом.
Виставимо параграфу з контентом невелику тінь:
Панель з мініатюрами розташовуватиметься по центру екрана, у правій його частині. Також додамо даній панелі відображення, яке буде видно в браузерах функціонуючих на базі Webkit:
Елемент навігації розташовуватиметься поряд з мініатюрами:
Іконки для масштабування та повноекранного режиму будуть розміщені у правому верхньому кутку мініатюри:
Елемент завантаження відобразимо в центрі екрана:
JAVASCRIPT
Перш за все підключимо всі наші скрипти:
Потім додамо метод, який завантажить усі наші зображення:
Закешуємо деякі значення:
Потім завантажимо всі зображення:
Наступна функція покаже першу фотографію та створить кілька обробників подій:
Ця функція відповідає за виведення наступної або попередньої фотографії:
Змінюємо розміри зображення та застосовуємо їх до розмірів екрану:
Остання функція дасть нам розміри зображення та його правильне позиціонування:
З jQuery покінчено. Тепер підключимо кілька шрифтів. Для цього додамо наступний HTML у розділ head:
От і все! Ми сподіваємось, що урок вам сподобався!
Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: www.tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/ Переклав: Станіслав Протасевич Урок створено: 15 Березня 2011 Переглядів: 45706 Правила передруку
5 останніх уроків рубрики "jQuery"
Анімація набір тексту на jQuery
Сьогодні ми б хотіли вам розповісти пробібліотека TypeIt - безкоштовний jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна досягти дуже реалістичного ефекту.
Тимчасова шкала на jQuery
jQuery плагін для створення тимчасової шкали.
Малюємо діаграму Ганта
jQuery плагін для створення діаграми Ганта.
AJAX та PHP: завантаження файлу
Приклад того, як здійснити завантаження файлу через PHP і jQuery ajax.