Litebox скрипт для показу картинок, AETHER

Опублікував Олександр Шабуневич - 13 Березень 2006, 13:14

Нещодавно натрапив на чудовий скрипт Lightbox, написаний на javascript, який дозволяє дуже зручно поводитися з картинками на сайті. Якщо коротенько, цей скрипт при кліку на зменшеному зображенні створює динамічний popup, що показує повну картинку.

Lightbox вже був кілька разів перероблений різними товаришами, наприклад модальні вікна, lightbox plus і т.д.

Я ж поведу про свою версію — доповнену і перероблену…

Так, самеLitebox — так я назвав свою версію, яка дещо відрізняється від оригіналу.

Початковою ідеєю послужив, звичайно ж, Lightbox. Однак, трохи пізніше я натрапив на портфоліо веб-технолога Камерона Адамса, в якому він використовував схожий скрипт (самописний), але займав він набагато менше місця (близько 3 кілобайт). Я завжди любив мінімалізм, тож цей варіант мені сподобався. Крім того, скрипт Камерона мав цікаву особливість – дозволяв переглядати всі картинки на сторінці послідовно, не закриваючи модального вікна.

Щоправда, мав він і недоліки. А саме: був розрахований на фіксовану висоту вікна та передбачав обов'язкове завдання геометричних розмірів картинки у кожному засланні.

Моя версія

Загалом, сів я вчора і написав свою версію, що вийшла зі складання обох перелічених варіантів. Робив для себе, але якщо комусь сподобається, то можете користуватися на здоров'я. Короткі характеристики:

  • Важить 4.5 5 Кб (замість 12.5 у Lightbox і 70 у другій версії) тому і називаєтьсяLite box =)
  • Має можливість переглядати картинки, не закриваючи вікна
  • Не вимагає вказівки розмірів - обчислює автоматично
  • Контрольоформлення винесено до CSS

Клацніть на будь-який з каринок:

Як користуватися

Для використання скрипту, вам достатньо покласти файлиlitebox.js іlitebox.css у корінь сайту та підключити їх до секцій head :

Ось приклад коду однієї з картинок вище:

Тільки не забудьте закинути всі необхідні файли (картинки та CSS) у потрібну папку (за замовчуванням у корінь сайту, але це можна змінити у CSS).

Користувачі можуть відкрити Litebox простим кліком по зменшеній картинці. Закрити вікно можна двома способами: натиснувши ПРОБІЛ або клацнувши на збільшеній картинці. Переміщатися між картинками можна за допомогою клавіш-стрілок (ліворуч-праворуч) на клавіатурі - дякую за ідею bestann - або за допомогою спеціальних кнопок внизу картинки.

Файл: Litebox (версія від 2006/08/18)

  • 2006-08-18 - тепер вікно закривається і після натискання ESC
  • 2006-05-09 - виправлена ​​помилка закриття вікна в Safari (наскільки зміг перевірити), а також тепер у Firefox, клік середньою клавішею не призводить до відкриття двох вікон
  • 2006-04-11 - тепер переміщення по картинках можна робити за допомогою клавіш? і? (не працює в IE), а для закриття картинки використовується ПРОБІЛ
  • 2006-03-23 ​​- додано напис, що пояснює закриття вікна і трохи підправлений .css

English version (brief)

Це моя ремака (fully rewriten) від знаменитого Lightbox JS by Lokesh Dhakar. Я був також захищений cool script of Cameron Adams і малі tiny and light version of the scripts —Litebox JS. I've made it for myself, but if you like it — feel free to use it as you want.

  • Додаткове світло: 4.5 5 Kb instead of 12.5 Kb Lightbox (and 70 of ver.2)
  • Allow to switch imagesinmodal window
  • Auto-calculate dimensions (cannot in version of Cameron)
  • Extended CSS-control