Новости
UPD 2014-02-14
Пам'ятайте, я півроку тому поділився скриптом для перегляду фотографій quickBox ? Я ще хвалився, що він мало важить, швидко працює і взагалі він красень. Чи справді це так, можна судити хіба що з боку, а я дам вам ще пару аргументів на користь скрипта. Сьогодні пропоную вашій увазі його вдосконалену версію - quickBox 0.2.
Чому quickBox?
Трохи більше, ніж всі користуються скриптами, що стали традиційною нормою. Якщо десь є скрипт зуму, то це в половині випадків SlimBox або LightBox. Замість 6 файлів, які потрібні для LightBox, мій скрипт вимагає всього два: один CSS і один JS. Для його роботи не потрібні картинки, а фотографії він предзагружает перед виведенням на екран і важить при цьому 6,5 Кб.
Ось його основні характеристики:
- ніякої графіки, все побудовано на HTML + CSS
- для роботи потрібні два файли + jQuery
- предзагрузкі фотографій перед виведенням
- управління стрілками "вліво", "вправо" і кнопкою Esc (працює як в Win, так і MacOS). Збільшивши фотографію, можна перейти до наступної або попередньої, натиснувши курсор на клавіатурі, а щоб закрити вікно - Esc або посилання "Закрити" зверху справа.
- автоматична побудова галерей: якщо на сторінці більше однієї фотографії, яку ви хочете відкривати для збільшеного перегляду, скрипт автоматично створить галерею і виведе список картинок зверху зліва. Такого ні LightBox, ні SlimBox не вміють.
- якщо для фотографій заповнені атрибути title, вони Автоматичний будуть відображатися під кожним фото в якості опису.
- скрипт перевіряє, чи підключено jQuery і якщо немає, то завантажує
Як це виглядає?
Я таки зроблю вам смішно, але візуальних відмінностей від першої версії ніяких, крім стилю відкриття вікна. Виглядає скрипт в роботі ось так:
приклад
Побачити скрипт в роботі ви можете на сторінці з демо .
як встановлювати
Установка займає 1 хвилину. Вам буде потрібно завантажити файли в будь-яку папку на вашому хостингу через ftp.
- Як встановлювати?- Дуже просто.
- Дякую ви мені дуже допомогли.
Завантажуємо вміст архіву в кореневу папку / js /. В head документа перед закривається тегом </ HEAD> прописуємо рядок:
<Script type = "text / javascript" src = "/ js / quickbox.js"> </ script>Якщо у вас не підключено jquery, просто завантажте його за адресою: /jquery.js. А для того, щоб скрипт міг обробляти ваші фотографії. потрібно додати їм атрибут: class = 'quickbox'. Як приклад ось вам 4 фотографії:
<a class="quickbox" href="01.jpg" title="Без проблем, ти теж можеш бути вегетаріанцем"> <img src = "01s.jpg"> </a> <a class = "quickbox" href = "02.jpg" title = "Цікаво, в якому банку реально зможуть зробити прекрасну?"> <img src = "02s.jpg"> </a> <a class = "quickbox" href = "03.jpg" title = "Дуже стара футболка"> <img src = "03s.jpg"> </a> <a class="quickbox" href="04.jpg" title="І правда, навіщо питаться?"> <img src = " 04s.jpg "> </a>завантажити
Скрипт безкоштовний, користуйтеся їм і радійте життю. Будь ласка, не намагайтеся його продати, не порушуйте здоровий глузд :-).
Як завжди, чекаю ваших коментарів і порад :).
Чому quickBox?Як це виглядає?
Як встановлювати?
02.jpg" title = "Цікаво, в якому банку реально зможуть зробити прекрасну?
04.jpg" title="І правда, навіщо питаться?