Скачать litebox


15 Адаптивных jQuery плагинов Lightbox

Много раз делал обзоры различных галерей изображений, собрал обширную коллекцию эффектных слайд-шоу и лайтбокс-плагинов. Есть в копилке и Lighbox исключительно на CSS3, без подключения дополнительных js-библиотек. Но время не стоит на месте, пользователи всё чаще используют для сёрфинга интернета различные мобильные устройства, а значит адаптивность веб-элементов и в частности фото-галерей с эффектом «лайтбокс» становится одним из приоритетов, на который веб-дизайнерам и разработчикам стоит обращать внимание.

Представляю очередную подборку из 15 адаптивных jQuery плагинов Lightbox, которые дружат, как с десктопными браузерами, так и отлично вписываются в экраны различных мобильных устройств ( ноутбуки, смартфоны, планшеты и т.д.).

Смотрите демо на сайтах разработчиков, скачивайте понравившийся плагин и творите, творите, творите...

1. iLightbox

iLighbox — это лёгкий Лайтбокс-плагин jQuery с поддержкой широкого диапазона различных типов файлов:  изображения, видео, Flash / SWF,  содержание Ajax, фреймы и встроенные карты. Этот плагин также добавляет кнопки социальных сетей, что позволяет пользователям обмениваться контентом через  Facebook, Twitter или Reddit. Отличная возможность организации эффектных слайд-шоу, галерей изображений и видео-роликов, с просмотром в обычном, и полноэкранном режимах.

iLighbox работает довольно шустро и при просмотре на мобильных устройствах, более чем корректно отображает обрабатываемый контент. Кроме всего прочего, используя этот плагин, вы легко сможете реализовать вывод информационных блоков по типу модального окна.

  • Зависимость: jQuery
  • Поддержка браузерами: IE7+, Chrome, Firefox, Safari и Opera
  • Лицензия: А чёрт её знает)))

 

2. SwipeBox

Swipebox — это плагин JQuery с поддержкой сенсорных экранов мобильных платформ. Помимо изображений плагин поддерживает встраиваемое видео с Youtube и Vimeo. Swipebox очень просто прикрутить к любому проекту, плагин имеет несколько интуитивно-понятных опций для настройки его функционал и поведения. На сайте разработчика подробнейшая документация по подключению и использованию плагина, без лишней воды всё только по делу, так что разобраться что, куда, и зачем, думаю будет не сложно.

  • Зависимость: jQuery
  • Поддержка браузерами: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android и Windows Phone
  • Лицензия: Не определил, может вам повезёт)))

 

3. MagnificPopup

Давно известный и хорошо себя зарекомендовавший лайтбокс-плагин на jQuery или Zepto.js. Автор плагина — Дмитрий Семенов, являющийся разработчиком и плагина PhotoSwipe, о котором расскажу чуть ниже. Поставляется в виде плагина jQuery/Zepto, имеет более широкие возможности отсутствующие в PhotoSwipe, такие как поддержка видео, отображение карт и Ajax содержания, реализация модальных окон с встроенными формами. По всем критериям, это ещё один замечательный инструмент в обойме веб-разработчика. Отдельно имеется плагин для WordPress и подробнейшая документация по настройке, и использованию. Удручает только отсутствие документации на Русском, судя по имени и фамилии автор вроде бы Русский, никогда не понимал из-за вредности это, или же из-за мнимого осознания своей навороченности, да мля. Ну да ладно, кому оно надо разберётся, мы тоже чай не всмятку сварены))).

  • Зависимость: jQuery 1.9.1+, или Zepto.js
  • Поддержка браузерами: IE7 (partially), IE8+, Chrome, Firefox, Safari и Opera
  • Лицензия: MIT license

 

4. PhotoSwipe

Ещё одна Javascript-галерея изображений от Дмитрия Семёнова, в отличии от MagnificPopup без каких бы то ни было наворотов, но в то же время, весь самый необходимый функционал в наличии. Организация галерей независимо от наличия библиотеки jQuery, просмотр в обычном и полноэкранном режимах, увеличение изображений с элементами анимации, подписи к картинкам и элементы управления, адаптивная вёрстка, поддержка управления жестами сенсорных экранов, для простой и лёгкой фото-галереи всего этого вполне достаточно. Вся необходимая документация в наличии.

  • Зависимость: Нет
  • Поддержка браузерами: IE8+, Chrome, Firefox, Safari, Opera и ещё парочка мобильных браузеров
  • Лицензия: MIT license

 

5. Nivo Lightbox

Старый-добрый Nivo от разработчиков студии Dev7studios, которые давно и с завидным постоянством радуют нас своими работами. Nivo Lightbox плагин, как автономный плагин jQuery предоставляется абсолютно бесплатно, а за специализированный плагин для WordPress придётся отвалить от $39.00 до $149.00 в зависимости от типа лицензии. Хотя, скажу по секрету, если хорошо поискать в интернетах, можно нарыть и халявный вариант, конечно если вам позволят ваши принципы.Бесплатный вариант плагина упакован всеми необходимыми функциями, гибкие настройки, несколько вариантов внешнего вида, различные эффекты переходов и навигации. Поддержка Iframe, SWF, видео с Youtube и Vimeo. Работает плагин очень быстро, практически без задержек, отображаемый контент отлично вписывается в размеры экранов мобильных устройств.

  • Зависимость: jQuery
  • Поддержка браузерами: IE9+, Chrome, Firefox, Safari и конечно Opera
  • Лицензия: MIT license

 

6. Lightbox для Bootstrap

Удивительно, но в таком популярном фреймворке как Bootstrap, Lightbox как таковой отсутствует, представленный, одноимённый плагин, был создан чтобы исправить ситуёвину. Конечно, в Bootstrap есть динамичные модальные окна, вот именно на них и опирается работа плагина Lightbox. Если вы плотно используете Bootstrap, я рекомендую применять эту библиотеку. Плагин хорошо интегрируется с базовым кодом Bootstrap. В итоге вы получите полноценные галереи изображений и возможность просмотра видео с YouTube в модальном окне.

  • Зависимость: jQuery и Bootstrap Modal
  • Поддержка браузерами: IE9+, Chrome, Firefox, Safari и конечно Opera
  • Лицензия: GNU license

 

7. ImageLightbox

Это лайтбокс плагин тоже без особых наворотов. Разработан специально для изображений, отсюда стало быть и название, ни видео, ни другие типы контента не поддерживаются, всё только на работу с картинками. Галерея с этим плагином получается динамичная и легко настраиваемая, дополнительной HTML разметки не требуется, достаточно одного тега <img> с идентификатором imagelightbox. Плагин работает очень просто и быстро, имеется возможность добавить подписи, элементы навигации и кнопку закрытия, по умолчанию закрывается лайтбокс по клику вне изображения. Уверен, этот плагин многим придётся по душе.

  • Зависимость: jQuery
  • Поддержка браузерами: IE9+, Chrome, Firefox, Safari и Opera
  • Лицензия: На нет и суда нет

8. MiniLightbox

Название плагина говорит само за себя. Всё по самому минимуму, библиотека jQuery не нужна, нет надобности в дополнительно разметке, обработка тега <img> с заданным классом для миниатюры, или же использование атрибута data-image-opened, в котором указывается путь до полноразмерной картинки. Ни видио, ни фреймы и другие типы содержания кроме изображений не поддерживаются. Если вы не озабочены поддержкой старыми браузерами и вам не требуется комбайн, для отображения разного рода содержания, этот малыш весом в 2кб справится с поставленной задачей, продемонстрировать ваши фотографии, или просто картинки.

  • Зависимость: Нет
  • Поддержка браузерами: IE10+, Chrome, Firefox, Safari и Opera
  • Лицензия: MIT license

 

9. LightCase

Lightcase это ещё один замечательный лайтбокс-плагин. Он поставляется с несколькими вариантами анимации, что делает взаимодействие с пользователем более живым и насыщенным, плавное появление и увеличение, скролинг справа, слева, снизу, и сверху. Кроме того, плагин поддерживает различные типы контента, включая встроенное видео с Youtube, HTML, SWF, HTML5 видео и формы входа, iframe и карты Google. Возможность использования элементов управления (навигации) и подписей к изображениям. В целом добротный механизм представления практически любого содержания.

  • Зависимость: jQuery и CSS3
  • Поддержка браузерами: IE9+, Chrome, Firefox, Safari и Opera
  • Лицензия: GPL license

 

10. Yalb

Еще один лайтбокс в двух вариантах исполнения. Версия Yalb (Vanilla) построена на чистом Javascript, использует js-функции, которые доступны только в современных браузерах. Все анимации осуществляется с помощью CSS-анимации и переходов(transition). Если вы хотели бы JQuery-версию, есть и такая, обратите внимание на jQuery.yalb

  • Зависимость: Javascript или jQuery
  • Поддержка браузерами: IE9+, Chrome, Firefox, Safari и Opera
  • Лицензия: MIT license

 

11. FeatherLight

6 к.битный lightbox-плагин, для более-менее подкованных разработчиков, снаряжен всеми самыми необходимыми функциями. Помимо поддержки всех распространённых типов контента(текст, изображения, iframe, Ajax), присутствует возможность подключения дополнительного расширения галереи изображений, а также вы можете разработать своё собственное расширение для этого плагина, которое будет полностью соответствовать вашим потребностям при создании нового проекта. Как всё это хозяйство(разработка расширения) работает, особо не вникал, но те кого этот плагин вставит, думаю разберутся))).

  • Зависимость: jQuery
  • Поддержка браузерами: IE8+, Chrome, Firefox, Safari и Opera
  • Лицензия: MIT license

 

12. LightGallery

LightGallery — многофункциональный лайтбокс-плагин с множеством дополнительных возможностей. Поставляется с более чем 20 опций, для настройки мельчайших деталей Lightbox. Здесь есть всё, ну, или почти всё)). Полноценная галерея изображений с аккуратно выстроенными миниатюрами, с элементами навигации и прокруткой миниатюр. Простая html-разметка в виде неупорядоченного списка <ul> с использованием атрибута data-src для полноразмерных картинок. Тоже самое и с видео из Youtube и Vimeo. Замечательно поддерживает все форматы видео HTML5, MP4, WebM, Ogg... Анимированные миниатюры, адаптивный макет с поддержкой мобильных устройств, слайд-эффекты и плавные переходы появления при переключении изображений, и другого контента. Внешний вид легко формируется и настраивается с помощью CSS. Предварительная загрузка изображений и оптимизация кода. Навигация с помощью клавиатуры для десктопов, а также возможность использования дополнительных шрифт-иконок. LightGallery — вот где настоящий «комбайн», главное не потеряться в обилии настроек и обширных возможностях этого плагина.Тем кому нужен приличный слайдер, рекомендую обратить внимание на lightSlider от этих же разработчиков.

  • Зависимость: jQuery
  • Поддержка браузерами: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android и Windows Phone
  • Лицензия: MIT license

 

13. StripJS

Непривычная, я бы даже сказал: необычная реализация lightbox, точнее, не совсем привычное представление содержания, когда изображение или видео, в оформлении лайтбокса, появляются справа, заполняя при этом не весь экран, а лишь на заданный размер полноразмерной картинки или видео. На больших экранах такой подход понятен, остаётся возможность взаимодействия со страницей. На маленьких экранах мобильных устройств, вся эта инновационная конструкция, плавно переходит в классический «лайтбокс». Задумка интересная, посмотрите демо, может кого и вставит такой креатив.

  • Зависимость: jQuery
  • Поддержка браузерами: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ и Android 3+
  • Лицензия: Creative Commons BY-NC-ND 3.0 license

 

14. LightLayer

Простой в использовании плагин лайтбокса, который хорошо сочетается с любым проектом и также хорошо смотрится на любом экране. В плагине LightLayer представлен контроль над множеством настроек, такими как изменение цвета фона и степени его прозрачности, положение базового блока, выбор эффектов переходов при открытии/закрытии, функции которыми пользователи могут манипулировать самостоятельно. Плагин отлично работает с содержанием внешних веб-сайтов, встроенными видео-плеерами и картами.

  • Зависимость: jQuery
  • Поддержка браузерами: IE9+, Chrome, Firefox, Safari и Opera
  • Лицензия: MIT license

 

15. FluidBox

Fluidbox — лайтбокс плагин исключительно для изображений. Количество всевозможных вариаций представления изображений по-настоящему впечатляет. Плагин замечательно работает с изображениями в различном исполнении, включая плавающие изображения, изображение с абсолютным позиционированием, картинки и фотографии обрамлённые рамкой, и имеющие отступы, с одиночными изображениями, и объединёнными в галерею. В общем, что зря воду лить, расписать все возможности плагина в коротеньком представлении всё равно не получится, так что лучше посмотрите демо, покрутите, повертите и думаю, этот плагин понравится многим.

  • Зависимость: jQuery
  • Поддержка браузерами: IE9+, Chrome, Firefox, Safari, Opera
  • Лицензия: MIT license

 На этом пожалуй и всё! Надеюсь этот небольшой обзор, поможет вам разобраться в ворохе предлагаемых продуктов веб-разработки. Хочу заметить, что далеко не все из представленных в подборке плагины я использовал на рабочих проектах, большинство из них прощупывал на тестовых площадках или на лаколке, так что при возникновении каких-либо вопросов, скорее всего будем их решать вместе, а вместе, как всегда всё у нас получится.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

dbmast.ru

Lightbox 2

lightbox

03.09.2014 (последний раз редактировалось 04.09.2014)сайт: Lightboxусловия использования: бесплатно

Скрипт организует просмотр изображений во всплывающем окне. Просмотр можно организовать либо по одному изображению, либо галереей, пролистывая картинки во всплывающем окне. Самый простой и самый быстрый в установке скрипт. Устанавливается и настраивается буквально за несколько минут.

Как установить lightbox

Скачиваете архив, распаковываете и закачиваете на сервер. Далее встраиваете скрипт в свой сайт. В html код страницы прописываете код

<script type="text/javascript" src="/demo_script/lightbox/js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="/demo_script/lightbox/js/lightbox.js"></script> <link href="/demo_script/lightbox/css/lightbox.css" rel="stylesheet" /> И последний шаг. Вывод изображений. Вывод изображений делаете так

<a data-title="Название или описание картинки" data-lightbox="image" href="big.jpg"><img src="small.jpg" /></a> Стандартный код вывода маленькой картинки и ссылки на большую картинку, только в ссылку добавляется два параметра. Вот пример данного кода - при клике по картинке всплывает большое изображение.

За такой эффект отвечает параметр data-lightbox="image". Если у вас на странице много изображений, вы можете сделать открытие изображений без пролистывания во всплывающем окне, а можете объединять изображения и они будут пролистываться во всплывающем окне. Для объединения изображений нужно использовать одно имя для каждой группы картинок

<a data-title="Название" data-lightbox="image" href="big-1.jpg"><img src="small-1.jpg" /></a> <a data-title="Название" data-lightbox="image" href="big-2.jpg"><img src="small-2.jpg" /></a> <a data-title="Название" data-lightbox="image" href="big-3.jpg"><img src="small-3.jpg" /></a>

Как видите, все картинки можно пролистать во всплывающем окне, так как data-lightbox у всех одинаковый. Если хотите разделить картинки, чтобы они не листались, используйте подобный код

<a data-title="Название" data-lightbox="image-1" href="big-1.jpg"><img src="small-1.jpg" /></a> <a data-title="Название" data-lightbox="image-2" href="big-2.jpg"><img src="small-2.jpg" /></a> <a data-title="Название" data-lightbox="asd" href="big-3.jpg"><img src="small-3.jpg" /></a>

Теперь каждая картинка открывается отдельно, то есть нет возможности перелистнуть к следующей.

Что в модернизированной версии

Кнопка увеличения изображения до реального размера. Вы ее можете видеть во всех примерах. В оригинальной версии ее нет В самом скрипте есть настройка, можно выключить эту кнопку.

И второе мало кому нужное дополнение, это исключение дублей картинок. По умолчанию выключено, включить можно непосредственно в скрипте, там же где и включается кнопка реального размера. В обычном применении скрипта данная функция приносит только вред, использовать ее можно только в совсем безвыходных ситуациях.

Например, есть ссылки на картинки, но без маленьких изображений, то есть пустые ссылки

<a data-title="Название" data-lightbox="image" href="big-3.jpg"><img src="small-3.jpg" /></a> <a data-title="Название" data-lightbox="image" href="1.jpg"></a> <a data-title="Название" data-lightbox="image" href="2.jpg"></a> <a data-title="Название" data-lightbox="image" href="2.jpg"></a>

Обратите внимание, три ссылки пустые, то есть они ссылаются на большие изображения, но между тегами <a> </a> ничего нет, а одна ссылка заполнена изображением. В итоге в браузере видно только одну картинку, при нажатии на нее открывается большая картинка и подтягиваются все картинки из незаполненных ссылок и можно листать. И вот тут смотрите, в ссылках есть две одинаковые картинки(выделены красным) и когда листаете, то увидите две одинаковых картинки. Если в конкретном примере включить удаление дублей, то дублирующих картинок не будет.

Конечно, такой ситуации быть не должно, зачем выводить две одинаковые картинки, а затем удалять их. Но как ни странно, я столкнулся с такой ситуацией, в одном интернет-магазине у товара должны были выводиться дублирующие фотки(там были хитрые подмены фоток через скрипты), и при просмотре через lightbox дублирующие фотки выглядели очень не правильно. Вот там то и пригодилось удаление дублей.

Комментарии

RSS комментарии

11.12.2014 Виктор Скрипт очень хорош. При помощи data-title даже можно описать картинку. Но у меня возникла проблема, у меня на странице стоял скрипт который выдвигал блок сбоку при подключении данного скрипта он у меня пропадает. Причем пропадает он если подключены js скрипты. Думал из-за версии конфликтует нет не из-за них.

23.05.2015 Виктор У меня не работает, когда href="http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822" имеет такой вид. Без ?ver=20150523142822 работает25.05.2015 kaha thanks a lot29.06.2015 Андрей Большое спасибо, за ваш труд! Все заработало практически с первого раза)26.08.2015 Александр перепробовал разные аналоги. без конфликтов этот стал сразу. увеличение до оригин. размера гут.если б еще мышкой брать и сдвигать поле картинки-вообще капец 01.11.2015 Игорь Здравствуйте! Отличная галерея. Огромное спасибо. Только такой вопрос: В приведённом выше примере (3 картинки)изображения показываются зацикленно. А в скачанной версии lightbox-2.7.1 данная функция не работает. При просмотре последнего изображения кнопка далее не появляется. Подскажите, пожалуйста, в чем может быть причина? 14.11.2015 Антон на IOS и Андроиде затемнение экрана происходит не на всю страницу!!! в чём может быть проблема. В обычном ЛайтБокс - всё ОК!15.11.2015 Антон на IOS и Андроиде затемнение экрана происходит не на всю страницу!!! в чём может быть проблема. В обычном ЛайтБокс - всё ОК!15.11.2015 Антон на IOS и Андроиде затемнение экрана происходит не на всю страницу!!! в чём может быть проблема. В обычном ЛайтБокс - всё ОК!30.03.2016 Антон Здравствуйте! А можно ли сделать так, чтобы картинка открывалась в большем разрешении? 18.11.2016 Юра Спасибо огромное! Все работает отлично!04.05.2017 Игорь Огромное спасибо за скрипт! Очень давно искал что-то похожее и легко устанавливающееся. Только у меня почему-то под фотками непонятные надписи появляются Изображение 8 РёР· 8

Может, где-то нужно кодировку исправить?

12.09.2017 Barsuk Где же ты раньше был! Целый день потратил на то, чтобы прикрутить удаление дублей ))

У меня просто на главной странице превьюшка основного изображения, а у нее внизу еще меньше превьюшки дополнительных, из-за этого возникали дубли и в галерее.

12.09.2017 Barsuk Кстати на этой странице примеры работают некорректно )

Добавить свой комментарий

webi.ru

Описание системы LiteBox

Для входа в систему LiteBox нажмите "Войти" на сайте litebox.ru.

Появится окно авторизации пользователя, введите Логин и Пароль:

После входа в систему мы попадем в основной интерфейс «Управление магазином». Функционал распределен по нескольким вкладкам: Поставка, Запасы, Реализация, Справочники, Статистика, Отчеты.

Окно «Подсистемы» содержит следующие подсистемы:

УПРАВЛЕНИЕ МАГАЗИНОМ – это основной интерфейс для работы с магазином. Работа с кассой, документами, справочниками, отчетами сосредоточена в интерфейсе «Управление магазином».

АВТОЗАКАЗ – в этой подсистеме происходит расчет заказов поставщикам.

АЛКОГОЛЬ – служит для формирования алкогольной декларации в ФСРАР и запроса не читаемых марок в ЕГАИС.

ВЗАИМОРАСЧЕТЫ – подсистема для осуществления взаимных расчетов с контрагентами. Позволяет производить автоматический расчет оплат за поставленные товары, а также производить ручные корректировки платежей и задолженности.

ГРАФИКИ ПОСТАВОК – позволяет создавать графики поставок, на основе которых подсистема «автозаказ» будет рассчитывать заказы.

ДИСПЕТЧЕР ДОКУМЕНТОВ– подсистема для поиска, просмотра и редактирования любых документов.

ЗАКРЫТИЕ ПЕРИОДА – служит для установки даты запрета редактирования документов в подразделениях.

КАРТЫ ПОКУПАТЕЛЕЙ – подсистема для создания персонифицированных карт лояльности покупателей и управления ими. В системе предусмотрены карты двух типов: дисконтные и бонусные.

НАСТРОЙКА СИСТЕМЫ – подсистема для заполнения основных сведений о компании, необходимых для работы системы.

ПОДАРОЧНЫЕ СЕРТИФИКАТЫ – подсистема для создания подарочных сертификатов и управления ими.

УПРАВЛЕНИЕ АКЦИЯМИ – подсистема для создания и настройки акций.

УПРАВЛЕНИЕ АССОРТИМЕНТОМ – подсистема для настройки ассортиментной матрицы магазинов компании.

УПРАВЛЕНИЕ КАССАМИ – подсистема для управления кассами в магазинах компании. Позволяет создавать новые кассы, назначать сочетания «горячих клавиш», настраивать ограничения при осуществлении продаж по типам оплат, свойствам товаров, применении карт покупателей и т.п.

ПЛАНШЕТНЫЙ ИНТЕРФЕЙС – это планшетный интерфейс для управления магазином. Работа с приходными документами, запасами, печать ценников.

ИНВЕНТАРИЗАЦИЯ – подсистема для проведения пересчета остатков товара через мобильные устройства. Подсистема «Мобильные системы» является родительской для подсистемы «Инвентаризация».

ШТРИХКОДИРОВАНИЕ – подсистема для работы с товарными позициями через мобильные устройства. Подсистема «Мобильные системы» является родительской для подсистемы «Инвентаризация».

ОБМЕН С 1С - подсистема для выгрузки документов для дальнейшей работы с ними в 1С.

ОБМЕН С ДРИМКАС - подсистема для обмена справочниками и продажами с кассой Дримкас.

ОБМЕН С ECWID - подсистема для обмена справочниками с интернет магазином на платформе Ecwid.

ЦЕНООБРАЗОВАНИЕ - функционал подсистемы «Ценообразование» задает ограничение цен продажи и закупки, ограничение продаж по определенному параметру, а также копирование цен из одного подразделения в другое.

УПРАВЛЕНИЕ ТМ - подсистема для мониторинга работы транспортного модуля для работы с ЕГАИС.

СТАТИСТИКА - подсистема для мониторинга работы магазинов. Анализ работы магазинов представлен в виде диаграмм и графиков.

ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ - содержит данные о денежном балансе, а так же предоставляет возможность самостоятельно оплатить работу сервиса.

support.litebox.ru

Litebox: скрипт для показа картинок

Опубликовал Александр Шабуневич — 13 Март 2006, 13:14

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

Для этого вам достаточно подключить Lightbox.js, а затем дописать к каждой ссылке-предпросмотру атрибут rel="lightbox". Например так:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Lightbox уже был несколько раз переработан разными товарищами, например: модальные окна, lightbox plus и т. д.

Я же речь поведу о своей версии — дополненной и переработанной…

Litebox

Да, именно Litebox — так я назвал свою версию, которая несколько отличается от оригинала.

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

Правда имел он и недостатки. А именно: был расчитан на фиксированную высоту окна и предполагал обязательное задание геометрических размеров картинки в каждой ссылке.

Моя версия

В общем, сел я вчера и написал свою версию, получившуюся из сложения обоих перечисленных вариантов. Делал для себя, но если кому-то понравится — можете пользоваться на здоровье. Краткие характеристики:

  • Весит 4.5 5 Кб (вместо 12.5 у Lightbox и 70 у второй версии) — потому и называется Litebox =)
  • Имеет возможность просматривать картинки, не закрывая окна
  • Не требует указания размеров — вычисляет автоматом
  • Контроль оформления вынесен в CSS

Примеры

Кликните на любой из каринок:

Как пользоваться

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

<script type="text/javascript" src="/litebox.js"></script> <link rel="stylesheet" type="text/css" href="/litebox.css" />

Признак картинок-предпросмотра я оставил таким же как и у Lightbox, то есть вы можете использовать атрибут rel="lightbox".

Вот пример кода одной из картинок выше:

<a href="/images/7.jpg" rel="lightbox" title="Это пример большой картинки"><img src="http://www.aether.ru//images/7t.jpg" alt="typogenerator" /></a>

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

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

Файл: Litebox (версия от 2006-08-18)

History

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

English version (brief)

This is my remake (fully rewriten) of famous Lightbox JS by Lokesh Dhakar. I was also inspired by cool script of Cameron Adams and make a tiny and light version of both these scripts — Litebox JS. I’ve made it for myself, but if you like it — feel free to use it as you want.

Features:

  • Extra light: 4.5 5 Kb instead of 12.5 Kb Lightbox (and 70 of ver.2)
  • Allow to switch images within modal window
  • Auto-calculate dimensions (cannot in version of Cameron)
  • Extended CSS-control

To Use: Download .zip file in list above. Put all files from archive to appropriate folders (by default to root catalog), include litebox.js in your head section and then add rel="lightbox" attribute (equal to lightbox js attribute) to your thumbnail links.

www.aether.ru

ОНЛАЙН-КАССА LiteBox. Руководство пользователя. версия LiteBox Ульяновск

ЗАПУСК СИСТЕМЫ LITEBOX

ООО «Облачный ритейл» тел. службы поддержки: 8 800 500-89-12 [email protected] http://www.litebox.ru ЗАПУСК СИСТЕМЫ LITEBOX Руководство пользователя версия LiteBox 1.0 2016 Ульяновск ЗАПУСК СИСТЕМЫ LITEBOX

Подробнее

Кассовый терминал. Первичная настройка

Кассовый терминал Первичная настройка ООО Белатра 2013 СОДЕРЖАНИЕ 1. ВХОД В СИСТЕМУ... 3 2. РЕДАКТИРОВАНИЕ УЧЕТНОЙ ЗАПИСИ АДМИНИСТРАТОРА... 5 3. СОЗДАНИЕ НОВОГО ПОЛЬЗОВАТЕЛЯ «КАССИР»... 7 4. СОЗДАНИЕ НОВОГО

Подробнее

Set Retail 10 Инструкция кассира

Set Retail 10 Инструкция кассира Оглавление Кассовый модуль Раскладка клавиатуры Кассовые операции Вход в систему Открытие смены Печать Х отчета Внесение денег Главный экран кассира Добавление товара в

Подробнее

Руководство пользователя

Модуль интеграции 1С и МодульКасса для 1С: Управление небольшой фирмой 8 ред. 1.6 Версия 1.0 стр. 1 из 16 СОДЕРЖАНИЕ Москва 2017 1. Термины и определения... 3 2. Общие сведения... 3 3. Установка... 3 4.

Подробнее

1. Реестр «Родители»

1. Реестр «Родители» Реестр «Родители» содержит информацию обо всех родителях учеников ОУ. Открыть реестр можно через пункт в меню [Пуск/Реестры/Родители]. Откроется окно «Реестр родителей» (Рисунок 1).

Подробнее

Приложение «Мобильный журнал»

Единая образовательная сеть Россия, Санкт-Петербург Петроградская набережная, 36, лит. А, БЦ «Линкор», офис 309/310 www.dnevnik.ru Дневник.ру Приложение «Мобильный журнал» Руководство учителя Версия 1.0

Подробнее

Переход с Портала в Рабочую область

Загрузка фотографий строящихся домов на Портал Переход с Портала в Рабочую область В этой статье: - Доступ в личный кабинет; - Переход из личного кабинета в Рабочую область. Доступ в личный кабинет Реестр

Подробнее

ОПИСАНИЕ РАБОТЫ С 1С

ОПИСАНИЕ РАБОТЫ С 1С СОДЕРЖАНИЕ 1 ТЕРМИНЫ И ОПРЕДЕЛЕНИЯ...3 2 УСТАНОВКА И НАСТРОЙКА МОДУЛЯ...4 3 ОПИСАНИЕ ПРОГРАММЫ...8 4 ПРИЕМ ПЛАТЕЖЕЙ... 10 4.1 ПРОЦЕСС ПРИЕМА ПЛАТЕЖЕЙ... 10 4.2 ИНФОРМАЦИЯ О ПРИНЯТЫХ

Подробнее

Краткая инструкция. Программа OnlineAdmin.

Краткая инструкция. Программа OnlineAdmin. Запуск программы Общее описание Выбор карты игрока и регистрация Установка кредита на карту Обнуление баланса карты Просмотр чека по карте Просмотр смены Закрытие

Подробнее

ТЕХНОЛОГИЧЕСКАЯ ИНСТРУКЦИЯ. Версия

ТЕХНОЛОГИЧЕСКАЯ ИНСТРУКЦИЯ ПО ЗАПОЛНЕНИЮ ОТЧЕТНОЙ ФОРМЫ «СВЕДЕНИЯ О ПЕРЕЧНЯХ ДОЛЖНОСТЕЙ ГОСУДАРСТВЕННОЙ ГРАЖДАНСКОЙ СЛУЖБЫ СУБЪЕКТА РОССИЙСКОЙ ФЕДЕРАЦИИ И МУНИЦИПАЛЬНОЙ СЛУЖБЫ В СУБЪЕКТЕ РОССИЙСКОЙ ФЕДЕРАЦИИ»

Подробнее

Руководство пользователя

Руководство пользователя 1 Содержание 1. НАЧАЛО РАБОТЫ... 3 1.1 Как подключить Сбербанк ОнЛ@йн... 3 1.2 Окно авторизации... 4 1.3 Вход в Систему... 7 1.4 Выход из Системы... 9 2. ГЛАВНАЯ СТРАНИЦА... 9

Подробнее

Queue Buster Руководство пользователя

Queue Buster Руководство пользователя Queue Buster Руководство пользователя...1 Область применения...2 Установка программы...2 Конфигурирование программы...3 Закладка Основные...3 Закладка Сканер...3 Закладка

Подробнее

Руководство для родителей и учащихся

Программа «Электронный Классный Журнал» включает в себя сервис Электронный дневник, который пользователю в роли Родитель/Учащийся предоставляет следующие возможности: 1. Персональный вход в систему. 2.

Подробнее

Содержание Стр. 2. Содержание

Содержание Стр. 2 Содержание 1. НАЧАЛО РАБОТЫ С К2... 3 1.1 Запуск программы К2... 3 1.2 Главное окно К2... 5 1.2.1 Краткий обзор пунктов меню K2... 5 1.2.2 Знакомство со стандартной панелью инструментов...

Подробнее

Система Проффит. Спортивный комплекс.

Система Проффит. Спортивный комплекс. Справочник клиентов Справочник клиентов предназначен для создания и ведения списка клиентов (посетителей) спортивного комплекса. Настройка справочника осуществляется

Подробнее

Рисунок 1. Единый портал бюджетной системы

РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ ПО ФОРМИРОВАНИЮ ОТЧЕТОВ О ВЫПОЛНЕНИИ ГОСУДАРСТВЕННОГО ЗАДАНИЯ НА ОКАЗАНИЕ ГОСУДАРСТВЕННЫХ УСЛУГ (ВЫПОЛНЕНИЕ РАБОТ) В ГОСУДАРСТВЕННОЙ ИНТЕГРИРОВАННОЙ ИНФОРМАЦИОННОЙ СИСТЕМЕ УПРАВЛЕНИЯ

Подробнее

Руководство пользователя

Кассовый терминал Руководство пользователя Версия 1.4 ООО Белатра 2013 СОДЕРЖАНИЕ 1. ВХОД В СИСТЕМУ ПОЛЬЗОВАТЕЛЯ С ПРАВОМ ДОСТУПА «КАССИР»... 4 1.1 Открытие новой смены... 4 2. ВКЛАДКА СМЕНА ПО ИА... 6

Подробнее

Руководство пользователя «AS-M Касса»

Руководство пользователя «AS-M Касса» AS-M Оглавление 1 1 Общие сведения... 3 2 Функциональность... 3 3 Состав интерфейса модуля «Касса»... 3 4 Работа с программой... 6 4.1 Открытие и закрытие рабочего

Подробнее

Отчеты.Касса. Справка по окну.

1 Отчеты.Касса. Справка по окну. Автор инструкции: Черноляс И.В. СОДЕРЖАНИЕ: Список реализованных задач... 2 Введение... 3 Таблица результата... 5 Дополнительная таблица... 6 Дополнительная таблица. Контекстное

Подробнее

SiteKiosk Документация

Общие сведения Установка Первый запуск среды Настроенный запуск SiteKiosk компьютерная программа, позволяющая из персонального компьютера под управлением Windows сделать компьютер общественного доступа

Подробнее

Подготовка к работе с Excel

ГЛАВА 1 Подготовка к работе с Excel Многие читатели в большей или меньшей степени знакомы с электронными таблицами Excel. Тем не менее необходимо дать определение терминов, наиболее часто встречающихся

Подробнее

РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ

Единая информационно-аналитическая система сбора и свода отчетности Министерства финансов Российской Федерации РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ по работе с подсистемой «Бюджетные инвестиции» для главных распорядителей

Подробнее

РУКОВОДСТВО АДМИНИСТРАТОРА

И н в. п о д П о д п. и д а т В з а м. и н в. И н в. д у П о д п. и д а т а СПЕЦИАЛЬНАЯ КОМПЬЮТЕРНАЯ КАССОВАЯ СИСТЕМА, ОБЕСПЕЧИВАЮЩАЯ КОНТРОЛЬ ЗА ОБОРОТАМИ В СФЕРЕ ИГОРНОГО БИЗНЕСА КАССОВЫЙ ТЕРМИНАЛ РУКОВОДСТВО

Подробнее

Удаленный доступ с мобильного устройства

Удаленный доступ с мобильного устройства Удаленный просмотр поддерживается платформами ios и Adnroid. Приложение называется CamViews, последнюю версию данного приложения Вы можете скачать из магазина приложений

Подробнее

docplayer.ru


Смотрите также