Створюємо галерею з можливістю переміщення фотографій

У цьому уроці ми зробимо галерею у вигляді віртуального столу, на якому буде розкладено фотографії. У роботі будуть використовуватися jQuery та CSS3. Традиційна панель для галереї є площиною, на якій впорядковано розташовуються слайди для демонстрації. Наш "стіл" буде зображенням дерев'яного кухонного столу, а фотографії розміщуються у випадковому порядку з можливістю їхнього переміщення.

галерею
фотографій

Метою наших дій є те, щоб зробити стіл та фотографії якомога реалістичнішими. Ось список бажаних опцій:

  • Зображення дерев'яного столу як підкладка для фотографій
  • кожна фотографія може переміщатися столом
  • Кожна фотографія отримує випадкову позицію та орієнтацію для надання ефекту "безладу" композиції.
  • Фотографії мають білу рамочку та тінь для 3D ефекту, а також вони трохи прозорі.
  • Після розміщення на столі фотографії можна перетягувати мишкою з місця на місце

Крок 1. Розмітка

Погляньмо на розмітку HTML нашого столу:

Як бачите, розмітка дуже прямолінійна. Вона складається із трьох частин:

  • Тег img для зображення дерев'яного столу міститься всередині div #wooden-table . На повністю готовій сторінці, це зображення насправді є тлом div #lighttable . Причина завантаження цього зображення за допомогою тега img полягає в тому, що ми можемо прив'язати до нього подію load для виявлення моменту повного завантаження зображення. (Докладніше пояснюватиметься далі)
  • Заголовок сторінки та опис.
  • Сам div #lighttable, який містить 5 зображень, що виводяться на стіл.

Тепер подивимося на розмітку CSS.

Задається темно-сірий колір фону і шрифт за замовчуванням. Властивість overflow: hidden забезпечує відсутність смужки прокручування. (Такі ж властивості встановлюються для елемента html, так як це потрібно для IE, щоб запобігти виведенню смужки прокручування.)

Елемент div, який містить тег img для зображення дерев'яного столу

Панель зображень

Цей елемент отримує властивість position: relative, а фотографії з абсолютним позиціонуванням розташовуються всередині нього. Елементу задається відповідна висота та ширина, а також встановлюється фонове зображення дерев'яного столу.

Ми задаємо досить широкі відступи навколо панелі (70px). У такий спосіб гарантується. що зображення не перетягуватимуться на межі панелі. Якщо зображення розташовувати без поворотів, то відступи можна зробити рівними 0. Однак ми плануємо обертати зображення за допомогою трансформацій CSS3, а простого способу визначити остаточний розмір прямокутника, що обмежує, немає (він стане більше). Тому ми встановлюємо 70 px із запоасом для безпеки.

Наприкінці ми використовуємо margin: 0 auto для центрування панелі горизонтально та задаємо їй чарівну тонку темну межу. Потім панель ховається за допомогою display: none . Вона буде виводитися за допомогою jQuery, як тільки фонове зображення дерев'яного столу буде завантажено.

Фотографії на панелі

Кожному зображенню задається біла рамка та тінь CSS3. Ми використовуємо стандартний підхід для завдання тіні (box-shadow) разом зі специфічними методами для браузерів Mozilla і WebKit (-moz-box-shadow і -webkit-box-shadow відповідно), щоб тіні були видно якомога більшою кількістю браузерів.

  • Завантаження бібліотек jQuery та jQuery UI
  • Загасання панелі колизавантажено фонове зображення
  • Випадкове позиціонування та обертання кожної фотографії
  • Робить фотографії доступними для перетягування
  • "Планування" фотографій під час завантаження

Завантаження бібліотек

Спочатку потрібно завантажити бібліотеки jQuery та jQuery UI. jQuery UI реалізує метод draggable( , який використовується для перетягування фотографій мишкою).

Встановлення панелі зображень

Перша частина коду встановлює кілька змінних та обробник події для ініціалізації панелі зображень.

Ми будемо використовувати змінну newImageZIndex для послідовного завдання кожного зображення максимального значення властивості z-index під час завантаження. Таким чином забезпечується те, що зображення, що завантажується, завжди розташовується поверх інших на столі.

Прапор loaded використовується для визначення факту, що обробник події ініціалізації вже викликано. Таким чином, вирішується проблема деяких браузерів, що подія load може бути згенерована двічі для зображення дерев'яного столу.

Функція init() додає обробник події load , initPhotos() до зображення дерев'яного столу (тег img, який був створений в розмітці раніше). Таким чином, коли зображення дерев'яного столу завантажено, функція initPhotos() починає викладати фотографії. Ми робимо це для того, щоб запобігти викладанню фотографій на невидимий стіл.

На жаль, деякі браузери - наприклад Opera та IE7/8 - не завжди генерують подію load для зображень, які вже знаходяться в їхньому кеші. Щоб подолати цю проблему, функція перевіряє властивість об'єкта img зображення дерев'яного столу. Властивість complete встановлюється значення true, якщо зображення повністю завантажене. Якщо це сталося,то функція генерує подію load для запуску initPhotos() .

WoodenTable. get (0) повертає перший елемент DOM у наборі, який зберігається в об'єкті jQuery woodenTable - іншими словами, елемент img зображення дерев'яного столу.

Встановлення фотографій

  • Позиціонує та обертає випадковим чином фотографії в області панелі зображень
  • Робить фотографії, що перетягуються.
  • Приховує фотографії
  • Як тільки зображення повністю завантажено, функція робить його на 50% більшим, а потім поступово зменшує розмір до нормального стану і виявляє картинку. У такий спосіб формується враження, що фотографія падає на стіл.

1. Прояв панелі зображень

Функція використовує змінну loaded, щоб перевірити, що вона ще не була викликана - таким чином відстежується повторне генерування події load деякими браузерами. Якщо це перший виклик функції, то метод jQuery fadeIn() для елемента div #lighttable . Таким чином елемент div і щойно завантажене зображення столу проявляється.

2. Випадкове позиціонування та обертання фотографій

У циклі ми встановлюємо випадкове положення та обертання для фотографій. Використовується функція Math.random() для генерації значень, які забезпечують достатні відступи навколо панелі зображень (якщо фотографії мають дуже велику ширину або висоту). Для обертання використовується нахил не більше 30 градусів або проти годинникової стрілки, щоб фотографії було приємно розглядати.

Як тільки отримані значення, ми встановлюємо їх у різні властивості CSS фотографій. Властивості left та top позиціонують лівий верхній кут зображення на столі. А властивість CSS3 transform використовується для обертання фотографії. Бо не всібраузери підтримують стандартну властивість transform, ми додаємо префікс для механізмів Mozilla, WebKit та Opera.

Чому використовується $(this).css(), а не просто this.css()? Тому що це містить об'єкт елемента DOM img . Тому, щоб викликати метод jQuery для зображення (у нашому випадку css()), спочатку обернути елемент img об'єктом jQuery за допомогою $(this) . (Ви створюєте об'єкт jQuery з елемента DOM, передаючи елемент у функцію $() .)

3. Робимо фотографії, що перетягуються.

Щоб зробити об'єкт переміщуваним, jQuery UI надає метод draggable() . Все що потрібно - це викликати метод draggable() для елемента, який потрібно зробити таким, що переміщається. І все!

Ми передаємо кілька опцій метод draggable() для управління поведінкою переміщення:

Зображення не може бути зсунуте за межі батьківського елемента, в нашому випадку елемент #lighttable . (Відступи 70px, які були встановлені для елемента #lighttable в CSS, гарантують, що фотографія не може бути переміщена ближче ніж на 70 px до межі столу, що дозволяє врахувати поворот фотографій.)

stack: '#lighttable img'

Набір елементів буде розглядатися як стопка, на якій зверху лежить поточний елемент. Метод draggable() гарантує, що коли поточний елемент перетягуватиметься, то його властивість z-index матиме максимальне значення серед інших елементів стопки. Таким чином, конфігуруючи всі зображення в елементі #lighttable як стос, ми отримаємо ефект, що поточне зображення буде завжди перебувати зверху.

Встановлює курсор миші як руки з витягнутим вказівним пальцем під час перетягування.

4. "Падіння" фотографій на стіл під час завантаження

Остання частина коду циклу створює ефектпадіння фотографій на стіл під час завантаження.

Спочатку фотографія ховається за допомогою методу jQuery hide(). Таким чином ми не побачимо зображення на сторінці, доки воно не буде завантажено повністю.

Next, we attach a load event handler to the photo. Цей триггерований однина зображення буде завершено loading.

Обробник події спочатку встановлює значення loaded для зображення та використовує даний прапор для запобігання повторному запуску для даного зображення (бо деякі браузери генерують подію load більше одного разу).

Метод jQuery data() дозволяє приєднувати довільні дані до елемента, що дуже корисно для зберігання та відстеження додаткової інформації, пов'язаної з елементом.

Потім обробник зберігає поточне значення ширини та висоти фотографії у змінних imgWidth та imgHeight , що дозволяє відновити оригінальний розмір зображення після "приземлення" на стіл.

Далі фотографії збільшуються у півтора рази за шириною та висотою, так що вони перевищують розмір столу і робляться прозорими. Також ми використовуємо змінну newImageZIndex, щоб встановити властивість z-index для фотографії так, щоб вона відображалася поверх усіх раніше виведених зображень. Так імітується природний порядок фотографій під час викладання на стіл.

Тепер робимо "падіння" фотографій на стіл. Тут використовується метод jQuery animate() , якому передаються властивості CSS як цільові установки фінального зображення: реальні ширина і висота, а також прозорість .95. Останній аргумент методу animate() задає тривалість виконання анімації (1200 мілісекунд). jQuery потім виконує всю роботу і поступово виявляє зображення, одночасно змінюючи його розміри доти, доки фотографія не "приземлиться" на стіл.

На завершення, після встановлення обробника подій, додаємо код, який використовується для генерації події load навіть якщо зображення кешоване.

Деякі проблеми.

Незважаючи на те, що скрипт загалом працює відмінно, є кілька зауважень, які треба зазначити:

  • IE не обертає зображення. Оскільки IE6/7/8 не підтримує трансформації CSS, зображення в них не обертаються. Хоча основні функції працюють навіть у IE6 (що дуже разюче!).
  • Не працює на iPhone/iPad. Метод draggable() не підтримує масштабування, хоча в майбутньому ситуація може змінитися.

Цей урок підготовлений для вас командою сайту ruseller.com Джерело уроку: www.elated.com/articles/kitchen-table-slick-photo-light-table-css3-jquery/ Переклав: Сергій Фастунов Урок створено: 28 Вересня 2010 Переглядів: 27490 Правила передруку

5 останніх уроків рубрики "jQuery"

Анімація набір тексту на jQuery

Сьогодні ми хотіли б вам розповісти про бібліотеку TypeIt — безкоштовний jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна досягти дуже реалістичного ефекту.

Тимчасова шкала на jQuery

jQuery плагін для створення тимчасової шкали.

Малюємо діаграму Ганта

jQuery плагін для створення діаграми Ганта.

AJAX та PHP: завантаження файлу

Приклад того, як здійснити завантаження файлу через PHP і jQuery ajax.