Створюємо галерею зображень з ефектом слайд шоу використовуючи бібліотеку jQuery
Живий приклад роботи галереї зображень (скрипт gallery.js) Ви бачите нижче. Тут міститься 10 різних фотографій, але фотографій можна зробити будь-яку кількість, це на Ваш розсуд. Я використовував фотографії свого рідного міста Смоленська. Отже, дивимося роботу галереї зображень:
Як в основному вікні, так і в панелі мініатюр є кнопки для гортання фотографій. Крім того, управляти перегортанням можна і з клавіатури комп'ютера, використовуючи кнопки переміщення Ліворуч або Праворуч. Запустити або зупинити слайд шоу можна за допомогою кнопки S на клавіатурі.
Для установки галереї буде потрібно подгрузка плагінів jQuery. Для цього скачайте архів. В архіві є приклад роботи бібліотеки файл: index.html. якщо щось не зрозумієте в цьому уроці, Ви завжди можете подивитися вихідний код роботи скрипта.
Отже, розпаковуємо скачаний архів. Вважаємо, що всі файли у Вас лежать в кореневій папці, хоча покласти всі файли Ви можете в будь-яку папку сайту, але при цьому не забудьте прописати правильний шлях до цих файлів.
Файли: jquery-1.6.2.min.js. gallery.js. gallery.css - це відповідно бібліотека jQuery. плагін галереї і таблиця стилів оформлення. Ці файли покладіть в кореневу папку вашого сайту. Так само в кореневу папку покладіть всі файли картинок з архіву. Файли фотографій у Вас звичайно ж будуть свої.
Це стандартне підключення скриптів і таблиць стилів CSS, одночасно тут же ми активуємо функцію запуску галереї зображень.
Для виведення галереї на web-сторінці (між тегами
і ), В потрібному місці вставляємо код лістингу 2.
Тут спочатку йде звичайний стиль оформлення блоку виведення галереї, а потім перерахування всіх фотографій використовуваних в слайд шоу. Для зменшення розміру коду в лістингу 2 показані тільки 3 перші фотографії. Як бачите перерахування йде звичайним ненумерований списком. Нумерація починається з нуля: class = "image0"
Додавання додаткових фотографій і мініатюр відбувається простим додаванням блоку укладеного в теги
в код лістингу 2. Відповідно зі зміною назви нових файлів: (Повнорозмірне зображення) і img src = "dnepr_mini.jpg" (мініатюра) і подальшої нумерацією: class = "image0".
Примітка: всі мініатюри зображень повинні бути однієї висоти і бажано однієї ширини, а «великі» зображення не повинні перевищувати розміри основного вікна web-сторінки.
Додаткову настройку роботи галереї можна зробити в коді плагіна (файл gallery.js). Тут нам доступні наступні настройки:
Все мені подобається в роботі цього плагіна і галерєї избражение, але є один неприємний мінус. Ви помітили, що написи Start. Stop. sek. Foto виконані англійською. Якщо Ваш сайт використовує систему кодування charset = UTF-8. то Ви можете прописати ці написи російською (написати Старт. Стоп. сек.ФОТО). Робиться це в файлі gallery.js.
Але якщо на Вашому сайті використана кодування charset = windows-1251 (як у мене), то краще перестрахуватися і написати всі ці слова англійськими символами, інакше іноді можуть виникнути помилки у вигляді "кракозябри", що погодьтеся не дуже красиво.
Ось власне кажучи і все. Як бачите все досить просто і працює у всіх поширених браузерах.
Завантажити архів з вихідними кодами.
Читайте також інші наші матеріали.
Як змінити DNS сервера у Домену?
Як створити реально працюючу модель бізнесу?
Наближення і віддалення зображень за допомогою jQuery.
Як практично зареєструвати Доменне ім'я.
уроки HTML
CSS уроки
статті
Інструменти
Шаблони сайтів
книги
прикраси
Сайт від А до Я
Заробити в інтернеті
Обман в Інтернеті
Охорона праці
МОДУЛЬНІ КАРТИНИ
PHP УРОКИ
послуги
скрипти
SEO
jQuery
Спеціальна оцінка умов праці (Соуто) - АРМ
Платіжні системи Інтернету
УРОКИ ФОТОШОП
секретний розділ
З нами зробити сайт
зможе навіть Дитина!
"Сайт від А до Я"
Дізнатися зараз >>>
Хочете заробити?
2-х рівнева
Партнерська програма!
Приєднуйтесь.
Модульна картина: Розкіш червоного оксамиту
Модульна картина абстракція: Енергія сонця
Модульна картина: Сині троянди
Модульна картина: Водоспад
Модульна картина: Орхідеї
Реєстрація доменів
ТОВ "ПК" ЛюксСтрой "
Якщо Вам сподобався
наш сайт, встановіть
Нашу посилання. і
Отримайте подарунки.