Необхідно створити фотогалерею для власного сайту. яка працювала б без перезавантаження сторінки? Ви маєте html-сторінку або повноцінний сайт під будь-якої CMS (системою керування вмістом) і хочете використовувати приємну фотогалерею для показу фото Вашим знайомим, колегам або клієнтам?
Сьогодні це не проблема. Shadowbox вирішить Вашу задачу.
Основні параметри:
Основні настройки shadowbox
анімувати чи контейнер при завантаженні зображення
час до переходу до наступного зображення, якщо воно є; якщо виставити 0 - то перехід до наступного зображення буде тільки після натискання миші - слайдшоу не працюватиме
дозвіл контейнера під час завантаження зображення
Як використовувати Shadowbox?
Для того, щоб використовувати цю галерею, Вам необхідно скопіювати файли з папки Changed_package (якщо Ви вибираєте мою версію) до себе на хостинг і додати до Вашої web-сторінці, на якій необхідно розмістити галерею (зазвичай - index.php або index.html) , наступне:
шлях до файлу shadowbox.js:
шлях до файлу shadowbox.css:
Ось цей код повинен бути в верху сторінки:
також необхідно завантажити зображення.
Для того, щоб використовувати Shadowbox, Вам необхідно всередині html сторінки використовувати код:
title = "Stefan Beutler" alt = "Stefan Beutler" - Тема зображення і опис. Використовується для виведення вгорі зображень.
rel = "shadowbox [Vacation]" - код, що викликає Shadowbox. Замість слова [Vacation] може бути будь-який. Якщо необхідно використовувати галерею, то це слово має застосовуватися тільки для тих зображень, які включені в один альбом.
- зображення-мініатюра, яке відображається на сторінці. Я використовую мініатюри рідко, так як їх створення не автоматичне.
Які зміни я зробив:
• При наявності декількох зображень, користувачеві незручно шукати кнопку «Наступне» або «Попереднє», які розташовуються під самим зображенням.
Тому, я вивів функцію «Наступне» - над зображенням, тобто, при кліці на зображення - користувач переходить до наступного зображення.
• Коли користувач переміщує курсор вліво, то може побачити велику кнопку-шар для перемикання «Попереднього» зображення.
• Якщо користувач клацає на порожньому просторі фону заповнення, то зображення закривається.
• Змінив стильове оформлення, додав CSS-3 код для більш красивого відображення.
Всього цього в стандарті немає.
При бажанні, Ви можете використовувати незмінені файли.
Якщо Вам щось не зрозуміло, то Ви можете відкрити вихідний код сторінок демонстрації: клацніть правою кнопкою миші на порожньому місці сторінки> Вихідний код.
Файли ShadowBox:
Завантажити ShadowBox зі змінами
Костянтин, звертайтеся якщо що.
Звичайно поділюся, все вийшло)) Спасибо огромное!))
krigare.pro. в будь-якій статті на будь-яку фотографію тисніть і дивіться, взагалі відмінно стало !!)) Ще раз спасибі!
Так ось дивився дивився, не зміг розгледіти якщо чесно ((Якщо підкажете в якому місці файлу js шукати, буду дуже вдячний)
Костянтин, в тому і задумка, що вперед можна декількома способами гортати: натискаючи на зображення, автоматично і по навігаційної стрілкою внизу. А ось назад тільки по наві. стрілкою. Тому я не робив вперед стрілку праворуч.
Це можна реалізувати. Подивіться як зроблена стрілка назад і яка функція JS виконує цю дію.
Добридень! А як би ще справа стрілочку для гортання зробити? Підкажіть будь ласка.
Дякуємо.