Головна. Слайд-галереї Оригінальна фотогалерея на css, ajax і jquery
Інформація, представлена на цій сторінці орієнтована в першу чергу для початківців web-майстрів.
У цьому уроці ми збираємося створити ще одну галерею зображень зі слайдами внизу, які рухаються автоматично при переміщенні миші. Прокрутка зображень зроблена за допомогою CSS і JQuery. Ідея галереї полягає в тому, щоб дозволити користувачеві збільшити картинку, натиснувши на її картинку-превью. При наведенні курсора миші на мініатюру, вона освітлюється, а при натисканні - збільшується в поле показу до оригінальних розмірів. Крім цього зміну зображень можна здійснювати натисканням миші на лівий або правий край картинки (при цьому курсор миші трансформується і з'являються стрілки - покажчики, але не у всіх браузерах). Якщо Ви наведете миша на центральну частину зображення, покажчик приймає форму «плюсик», а при натисканні миші змінюється на «мінус» і прев'юшки зникають. При повторному натисканні, все повертається в початковий стан.
Крім того, ми будемо використовувати PHP, щоб вивести зображення і покажчики з структури папок. Папки міститимуть подпапки з альбомами і ми додамо опцію в галереї, яка дозволяє вибрати альбом. Також буде використовуватися функція зміни розміру зображень і доданий XML-файл, який містить опису картинок.
Зробіть клацання мишею в області картинки для її збільшення.
Оригінальна фотогалерея на css, ajax і jquery
Установка на сайт
Скачайте навчальний матеріал і розпакуйте в окрему папку на комп'ютері.
В папці SlidingThumbnailsGallery Ви побачите вкладені папки ajax. css. icons. images і thumbs. а також файл скрипта jquery.gallery.js і індексний файл index.php.
Перевірити функціональність галереї на комп'ютері не вийде, так як, по-перше, індексний файл має розширення PHP, а по-друге, необхідне підключення до Мережі Інтернет.
Тому спочатку розберемося з усім вмістом папки SlidingThumbnailsGallery і потім закачаємо її повністю на сервер сайту, де відкриємо файл index.php.
папка images
Почнемо з цієї папки, так як підбір і розміщення зображень грає ключову роль в створенні галереї. У кожен з трьох альбомів завантажимо зображення розміром комфортним для показу. Кількість зображень може бути обмежена тільки умовою розумної достатності і відповідати кількості картинок-превью в папці thumbs.
папка thumbs
У цій папці, в трьох вкладених папках, містяться прев'юшки наших зображень для показу. Розміри цих зображень, в крайньому випадку, можна залишити оригінальними, якщо не бажаєте заморочуватися зі змінами розмірів, але, з міркувань доцільності і в плані економії місця на диску, краще все-таки зробити їх розміри менше.
У кожному альбомі з картинками-превью є XML-файл з назвами і описами для зображень. Назвемо цей файл desc.xml. Додавання опису для зображень не є обов'язковим. Структура XML-файлу буде наступною:
файл index.php
У розділі head перевіримо підключення файлу стилів галереї:
Давайте поглянемо на HTML і PHP-коди в розділі body:
Тут можна проставити посилання і її опис, наприклад для переходу на будь-яку сторінку з матеріалом по даній темі.
Далі йде блок вибору альбому. Перший альбом буде обраний за замовчуванням:
У цих рядках прописані шляхи виклику jquery. У верхньому рядку це відбувається з сайту //ajax.googleapis.com. в нижній-же файл jquery.gallery.js є в нашому розпорядженні. Про підключення бібліотеки прочитайте тут
У цій папці знаходиться файл стилів style.css. Розберемо його максимально детально.
1. На самому початку додані стилі за замовчуванням для body:
Поточний колір фону за замовчуванням наближений до білого (background-color: # f9f9f9;), але Ви можете застосувати інші кольори, щоб картина виглядала більш привабливою.
2. Давайте подивимося стилі верхньої «планки» сторінки:
3. Далі йдуть стилі інфо-бару (в самому низу), в якому будуть з'являтися опису кожного зображення:
4. Інформаційна панель і рядки вибору альбому будуть фіксовані і розташовані у верхній правій частині сторінки. Поля albumSelect і albumSelect .title будуть виглядати в стилях наступним чином:
5. В якості покажчиків використовується два зображення маленьких трикутників. Визначимо для них два класи - вгору і вниз:
6. Список UL з усіма альбомами буде виглядати в стилях наступним чином:
Список буде показаний, коли користувач натискає на зображення покажчика-трикутнички, щоб розгорнути його.
7. Значок завантаження контейнера (loading.gif) буде показаний в центрі сторінки (left: 50%;). Відстань від верху - 40% (top: 40%;):
8. Для того, щоб прокручувати бар, переміщаючи миша, нам потрібно надати йому особливий стиль. Для цього ThumbsWrapper буде позиціонуватися абсолютно і займати всю ширину вікна:
10. Мініатюрні зображення мають наступні стилі:
Їм присвоєно низьке значення непрозорості (opacity: 0.4;, opacity = 40), щоб отримати можливість додати ефект при наведенні.
11. Блок ImageWrapper для зображень великого розміру має наступний стиль:
Доданий відступ зверху (padding-top: 30px;), щоб зробити альбом з великими зображеннями відокремленим.
12. Вирівнюємо центр зображення по горизонталі (margin: 0 auto;):
Тут також створена акуратна тінь блоку для великих зображень, яка сприймається усіма сучасними браузерами.
13. І, нарешті, визначаємо класи для різних типів курсору:
Дякуємо за увагу. Відвідуйте мій сайт. Бувай! L.M.