Галерея зображень на Ваш сайт (jQuery)
У цьому уроці я покажу Вам, як створити інтерактивну галерею зображень для Вашого сайту, щоб відвідувачі, клацаючи по мініатюрах зображень могли побачити кожне зображення в збільшеному вигляді. І ніякої перезавантаження сторінки! Зображення з'являються автоматично з ефектом поступового прояви!
У нас на сторінці буде область зі слайдами зображень галереї і область, де ми будемо показувати зображення в збільшеному масштабі. Клацаючи по кожній із мініатюр, відвідувач буде бачити відповідне велике зображення в цій області. Зображення буде проявлятися протягом деякого часу, створюючи ефект анімації, а попереднє зображення буде в цей час розчинятися.
Справитися з таким завданням досить нескладно, якщо застосувати можливості бібліотеки jQuery. Цим ми з Вами і займемося.
Але перед тим як писати код Java Script нам потрібно пройти деякі підготовчі етапи.
По-перше, потрібно підготувати зображення. У нас буде два види зображень: мініатюри і зображення великого розміру. Я створила папку «img», в якій створила ще 2 папки: «big» і «small». У папці «big» я зберегла великі зображення (у мене вони всі приблизно одного розміру по ширині і висоті, десь 500px на 500px). У папці «small» лежать мініатюри тих же самих зображень (їх розміри також повинні бути приблизно однаковими. Коли я говорю приблизно, це означає, що різниця в 2-3 пікселя не грає особливого значення).
Ви можете використовувати мої зображення скачавши файли з початкових кодів або створити таку ж структуру папок і помістити туди свої зображення, створюючи вже власну галерею.
По-друге, нам потрібно створити html-файл, створити в ньому розмітку сторінки з нашою галереєю та підключити до цього файлу css-файл (таблицю стилів).
Давайте цим зараз і займемося.
Тепер напишемо вміст цього файлу.
Між тегами «body» буде знаходиться div з ідентифікатором «wrapper». Він буде містити 2 основних елементи: тег header, в якому буде знаходиться заголовок і div з ідентифікатором «content», в якому буде знаходиться вся наша галерея.
Div «content» буде містити div з ідентифікатором «main», в якому буде знаходитися заголовок для галереї; div з ідентифікатором «gallery», де розташовані мініатюри наших зображень і ще один div з ідентифікатором «photo». Div з ідентифікатором «photo» поки що буде порожнім, але при роботі галереї в нього будуть виводитися великі зображення відповідних мініатюр.
Ось загалом-то і все. Код усього вищеописаного буде виглядати наступним чином:
Галерея на jQuery